右alignmentFlex项目？
是否有一个更灵活的方式来右alignment“联系人”比使用position: absolute ？
.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; }
<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>
http://jsfiddle.net/vqDK9/
干得好。 在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>
更灵活的方法是使用auto左边距（flex项目处理自动边距与在块格式化上下文中使用有点不同）。
.c { margin-left: auto; }
更新小提琴
如果你想为此使用flexbox，你应该能够通过这样做（ display: flex容器上的flex: 1 ， flex: 1上的项目为flex: 1 ， text-align: right为.c ）：
.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; flex: 1; } .b { text-align: center; } .c { text-align: right; }
…或者（甚至更简单），如果项目不需要满足，可以在容器上使用justify-content: space-between并完全删除text-align规则：
.main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; }
这是一个在Codepen上的演示 ，可以让你快速的尝试以上。
您也可以使用填充程序来填充剩余的空间。
<div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> .filler{ flex-grow: 1; }
我已经用3个不同的版本更新了解决scheme。 这是因为讨论了使用附加的填充元素的有效性。 如果你运行代码，你会发现所有的解决scheme都做了不同的事情。 例如，在项目b上设置填充类将使该项填充剩余的空间。 这有一个好处，就是不存在不可点击的“死亡”空间。
<div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="filler b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <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> <style> .main { display: flex; justify-content: space-between; } .mainfiller{display: flex;} .filler{flex-grow:1; text-align:center} .a, .b, .c { background: yellow; border: 1px solid #999; } </style>
如果你需要一个项目左alignment（如标题），然后多个项目右alignment（如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包含在上面的代码片段）
