display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;
因此，它的孩子(浅蓝色方块)安排自己，如下所示。但是，我想从正常流程中添加另一个孩子(绿色方块)，并将其相对于其父项定位。如下所示，我最好写一些底部的东西：20px;和边际：汽车。
我试图用z-index玩耍没有用。我该怎么办？我应该创建另一个父元素吗？
解决方法
应用位置：相对于flex容器。
应用位置：绝对到绿色的flex项目。
现在绿色的正方形绝对位于柔性容器内。
更具体地说，绿色正方形从文档流中移除，但保持在nearest positioned ancestor的范围内。
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项目。这将以非标准，意想不到的方式更改对齐方式。更多细节：Absolutely positioned flex item not being removed from normal flow in Firefox
方法#2：Flex Auto Margins&隐形Flex项目(DOM元素)
结合auto margins和新的无形弹性项目，可以实现布局。
新的flex项目与底部项目相同，并放置在相对端(顶部)。
更具体地说，由于柔性对准是基于自由空间的分布，所以新的项目是保持三个蓝框垂直居中的必要的平衡。新项目必须与现有绿色项目的高度相同，否则蓝色框将不会精确居中。
新项目从视图中删除，具有可见性：hidden。
简而言之：
>创建一个绿色框的副本。
>将其放在列表的开头。
>使用flex自动边距来保持蓝色框居中，两个绿色框都从两端创建相等的平衡。
>应用可见性：隐藏到重复的绿色框。
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 Auto Margins&隐形Flex项(伪元素)
这个方法与#2类似，除了它在语义上更清晰，而且必须知道绿色框的高度。
>创建与现有绿色框相同高度的伪元素。
>将其放在容器的开始处，并带有:: before。
>使用flex自动边距来保持蓝色框居中，绿色伪元素和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); /* 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>
补充笔记：
>与Flex容器的交叉轴不同，Flex容器具有用于定位各个柔性物品的对齐自身属性，there is no similar property,such as justify-self,for the main axis。
>如上所述，解决方案是使用绝对定位或flex auto margins来对齐主轴中的各个柔性物品。>由于通过在容器中分配可用空间来实现FlexBox对齐，因此可以插入不可见的flex项目以创建相等的平衡。>这些“幻影”项目的长度与要平衡的元素的长度完全相同很重要。否则，不会有平等的平衡，中间的项目不会完全中心。
