如何右对齐弹性项目？

本文翻译自：How to Right-align flex item?

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute ? 与使用position: absolute相比，有没有更多的flexbox-ish方式来使“ Contact”右对齐？

 .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/ http://jsfiddle.net/vqDK9/

---

#1楼

参考：https://stackoom.com/question/1W6o7/如何右对齐弹性项目

---

#2楼

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context). 更加灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。

.c {
    margin-left: auto;
}

Updated fiddle: 更新的小提琴：

 .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> 

---

#3楼

If you want to use flexbox for this, you should be able to, by doing this ( display: flex on the container, flex: 1 on the items, and text-align: right on .c ): 如果要为此使用flexbox，则应该能够这样做（在容器上display: flex ，在项目上display: flex flex: 1 ，在.c上显示text-align: right ）：

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-between on the container and remove the text-align rules completely: ...或更可替代地（甚至更简单），如果不需要满足这些条件，则可以在容器上使用justify-content: space-between ，并完全删除text-align规则：

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Here's a demo on Codepen to allow you to quickly try the above. 这是Codepen上的演示 ，可让您快速尝试上述操作。

---

#4楼

Here you go. 干得好。 Set justify-content: space-between on the flex container. 在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> 

---

#5楼

You can also use a filler to fill the remaining space. 您也可以使用填充物填充剩余空间。

<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;
}

I have updated the solution with 3 different versions. 我已经用3个不同的版本更新了解决方案。 This because of the discussion of the validity of using an additional filler element. 这是因为讨论了使用附加填充元素的有效性。 If you run the code snipped you see that all solutions do different things. 如果您运行了代码片段，则会看到所有解决方案都做不同的事情。 For instance setting the filler class on item b will make this item fill the remaining space. 例如，在项目b上设置填充器类别将使该项目填充剩余空间。 This has the benefit that there is no 'dead' space that is not clickable. 这样做的好处是，没有不可单击的“死”空间。

 <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> 

---

#6楼

If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this: 如果您需要将一项左对齐（例如标题），然后将多项右对齐（例如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
}

Here's what that will look like (only relavent CSS was included in snippet above) 这就是它的样子（上面的片段中仅包含了relavent CSS）