以下是实现此布局的五个选项：
应用于position: relativeflex容器。
应用于position: absolute绿色弹性项目。
现在，绿色方块已完全位于flex容器内。
更具体地说，绿色正方形已从文档流中删除，但仍位于最接近的祖先的边界内。
使用CSS污损特性top，bottom，left和right移动的绿色广场周围。
flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: Nowrap;
position: relative;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
display: flex;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
flex-container > flex-item:last-child {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%); /* fine tune horizontal centering */
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
一个警告：某些浏览器可能无法从正常流程中完全删除绝对定位的flex项目。这会以非标准的意外方式更改对齐方式。更多详细信息：绝对定位的flex项目不会从Firefox和IE11的常规流程中删除
方法2：Flex自动边距和不可见的Flex项（DOM元素） 结合使用页auto边距和新的，不可见的柔性项目，可以实现布局。
新的伸缩项目与底部项目相同，并位于另一端（顶部）。
更具体地说，因为弯曲对齐基于自由空间的分布，所以新项目是保持三个蓝色框垂直居中的必要平衡。新商品的高度必须与现有绿色商品的高度相同，否则蓝框将无法精确居中。
使用将该新项目从视图中删除visibility: hidden。
简而言之：
flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
margin-top: auto;
visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
<flex-container>
<flex-item></flex-item>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
此方法与＃2相似，但在语义上更简洁，并且必须知道绿色框的高度。
flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container::before {
content: "";
margin-top: auto;
height: calc(50px + 8px); /* height + borders */
visibility: hidden;
}
flex-container > flex-item:first-child {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
从上面的方法2或方法3开始，不必担心顶部和底部项目的高度相等，以保持相等的平衡，只需给每个项赋予即可flex: 1。这将迫使它们都占用可用空间，从而使中间项居中。
然后，您可以添加display: flex到底部项目以对齐内容。
这可能是最干净，最有效的方法。无需绝对定位，伪造元素或其他黑客手段。
只需创建一个三行网格。然后将第二行和第三行中的项目居中对齐。第一行可以保留为空。
grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
align-items: center;
justify-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
grid-item:nth-child(2) {
display: flex;
}
grid-item:nth-child(2)>flex-item {
width: 50px;
height: 50px;
margin: 0 5px;
border: 4px solid aqua;
}
grid-item:nth-child(3) {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
<grid-container>
<grid-item></grid-item>
<grid-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</grid-item>
<grid-item></grid-item>
</grid-container>
602392714
清零编程群