以下是实现此布局的五个选项:
应用于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>