对于那些使用Angular和Flex-Layout的人，在flex-item容器上使用以下命令:

<div fxLayout=“row” fxLayoutAlign=“flex-end”>

查看fxLayoutAlign文档和完整的fxLayout文档。

如果你需要一个项目左对齐(如标题)，但多个项目右对齐(如3个图像)，那么你可以这样做:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

下面是它的样子(上面的代码片段中只包含了相关的CSS)

对于那些使用Angular和Flex-Layout的人，在flex-item容器上使用以下命令:

<div fxLayout=“row” fxLayoutAlign=“flex-end”>

查看fxLayoutAlign文档和完整的fxLayout文档。

或者你可以使用justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

更灵活的方法是使用自动左距(灵活项对待自动左距与在块格式化上下文中使用时略有不同)。

.c {
    margin-left: auto;
}

更新的小提琴:

.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c {margin-left: auto;} <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <!--<div class="b"><a href="#">Some title centered</a></div>--> <div class="c"><a href="#">Contact</a></div> </div> <h1>Problem</h1> <p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

给你。在flex容器上设置justify-content: space-between。

.main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { text-align: center; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <!-- <div class="b"><a href="#">Some title centered</a></div> --> <div class="c"><a href="#">Contact</a></div> </div>