以下是实现此布局的五个选项：
- CSS定位
- 带有不可见DOM元素的Flexbox
- 带有不可见伪元素的Flexbox
- Flexbox与 flex: 1
- CSS网格布局
方法1：CSS定位属性
应用于
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%); 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。
简而言之：
- 创建绿色框的副本。
- 将其放在列表的开头。
- 使用弹性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>
方法3：Flex自动保证金和不可见的Flex项（伪元素）
此方法与＃2相似，但在语义上更简洁，并且必须知道绿色框的高度。
- 创建一个高度与现有绿色框相同的伪元素。
- 将其放置在容器的开头::before。
- 使用弹性auto边距使蓝色框居中，绿色的伪元素和DOM元素在两端保持相等的平衡。
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); 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>
方法4：添加flex: 1到顶部和底部项目
从上面的方法2或方法3开始，不必担心顶部和底部项目的高度相等，以保持相等的平衡，只需给每个项赋予即可flex: 1。这将迫使它们都占用可用空间，从而使中间项居中。
然后，您可以添加display: flex到底部项目以对齐内容。
方法5：CSS网格布局
这可能是最干净，最有效的方法。无需绝对定位，伪造元素或其他黑客手段。
只需创建一个三行网格。然后将第二行和第三行中的项目居中对齐。第一行可以保留为空。
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>
