我在 Flex 中显示以下布局时遇到困难。我有 5 个盒子，我想将容器一分为二，其中一个盒子垂直显示，另外 4 个垂直显示。
这是我的 CSS：
.trades, .trade-panel {
flex: 1;
}
.layout-4-5 {
flex-direction: column;
}
.layout-4-5 > div {
width: 50%;
}
然后我将第四个或最后一个孩子的基础设置为 100%。
.layout-4-5 > div:nth-child(1) {
flex-basis: 100%;
}
这是我的 HTML
<div class="trades layout-4-5">
<!--trade-panel are my individual boxes --->
<div class="trade-panel">
</div>
</div>
上面水平打印我的布局。考虑到我的flex-direction is column我的第一个孩子或盒子有100%的基础，那不应该打印我想要的吗？请提供任何帮助，我们将不胜感激。
注意：由于盒子大小相同，所以包含其他四个盒子的列应该更长，只要它们按照上面的排列方式就可以了。 tq
我不完全清楚你的问题或代码。但这是一个通用的解决方案：
flex-container-1 {
display: flex; /* establish flex container */
flex-direction: row; /* flex items will align horizontally */
justify-content: center; /* center flex items horizontally */
align-items: center; /* center flex items vertically */
/* for demo purposes only */
height: 250px;
width: 400px;
border: 1px solid #777;
background-color: lightgreen;
}
flex-container-1 > flex-item {
height: 90%;
flex: 0 0 45%; /* <flex-grow> <flex-shrink> <flex-basis> */
margin-right: 8px; /* a bit of space between the centered items */
border: 1px dashed #333;
background-color: yellow;
}
flex-container-2 {
height: 90%;
flex: 0 0 45%;
display: flex; /* flex item is now also flex container */
flex-direction: column; /* items will stack vertically */
justify-content: space-between; /* align items vertically */
}
flex-container-2 > flex-item {
flex: 0 0 22%;
border: 1px dashed #333;
background-color: yellow;
}
<flex-container-1><!-- main container -->
<flex-item></flex-item><!-- flex item #1 (first column) -->
<flex-container-2><!-- flex item #2 / nested flex container (second column) -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container-2><!-- close nested container -->
</flex-container-1><!-- close main container -->
jsFiddle https://jsfiddle.net/jv7tsLwh/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
