我想把A号、B号和C号放在中间.
我怎么才能让D个人完全向右转呢？
之前:
个
之后:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>以下是实现此布局的五个选项:
flex: 1在flex容器上涂抹position: relative.
将position: absolute应用于D项.
现在，这个项目是绝对定位在flex容器内.
更具体地说，D项从文档流中删除，但保持在nearest positioned ancestor的范围内.
使用CSS偏移属性top和right将此元素移动到位.
li:last-child {
position: absolute;
top: 0;
right: 0;
background: #ddd;
}
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p {
text-align: center;
margin-top: 0;
}
span {
background-color: aqua;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>One caveat对于这种方法来说，有些浏览器可能无法从正常流程中完全删除绝对定位的flex项.这会以非标准、意外的方式更改路由.更多详情:100
与auto margins和一个新的，不可见的弹性项目的组合，可以实现布局.
新的弹性项与项D相同，并放置在另一端(左侧边缘).
更具体地说，因为弹性对齐基于自由空间的分布，所以新项目是保持三个中间框水平居中的必要平衡.新项目的宽度必须与现有的D项目相同，否则中间的方框不会精确居中.
新项目将以visibility: hidden从视图中删除.
简而言之:
D元素的副本.auto边距保持A、B和C居中，两个D元素从两端创造相等的平衡.visibility: hidden应用于副本Dli:first-child {
margin-right: auto;
visibility: hidden;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }<ul>
<li>D</li><!-- new; invisible spacer item -->
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>此方法类似于#2，不同之处在于它在语义上更清晰，并且必须知道D的宽度.
D相同的伪元素.::before.auto边距来保持A、B和C完全居中，伪元素和D元素从两端创建相等的平衡.ul::before {
content:"D";
margin: 1px auto 1px 1px;
visibility: hidden;
padding: 5px;
background: #ddd;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>flex: 1 to left and right items从上面的方法#2或#3开始，不用担心左右两个项目的宽度相等来保持平衡，只需给每个项目flex: 1分即可.这将迫使它们都消耗可用空间，从而使中间的项目居中.
然后，您可以将display: flex个项目添加到单个项目中，以便对齐它们的内容.
NOTE about using this method with 100:目前在Chrome、Firefox、Edge以及可能的其他浏览器中，速记规则flex: 1分解为:
flex-grow: 1flex-shrink: 1个flex-basis: 0%当容器上使用min-height时，flex-basis上的percentage unit (%)会导致此方法中断.这是因为，作为一般规则，子对象的百分比高度需要父对象的显式属性设置.
这是一条可以追溯到1998年(CSS Level 2年)的旧CSS规则，在某种程度上在许多浏览器中仍然有效.有关完整的详细信息，请参见here和here.
以下是user2651804 comments 中发布的问题说明:
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container>div {
background: orange;
margin: 5px;
}
#flex-container>div:first-child {
flex: 1;
}
#flex-container::after {
content: "";
flex: 1;
}<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>解决方案是不使用百分比单位.试试px，或者干脆什么都不做(which is what the spec actually recommends，尽管事实上至少有一些主要浏览器出于任何原因附加了一个百分比单位).
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container > div {
background: orange;
margin: 5px;
}
/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */
#flex-container > div:first-child {
flex: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex: 1;
flex-basis: 0;
}
/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY
#flex-container > div:first-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
*/<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>这可能是最干净、最有效的方法.不需要绝对定位、伪元素或其他黑客手段.
只需创建一个包含多列的网格.然后将项目放置在中间和结束列中.基本上，只需将第一列留空即可.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>