Flexbox全半宽混合布局
Flexbox全半宽混合布局
提问于 2016-07-07 22:11:17
我在一个容器里放了7件东西。如何使前3个为全宽，后7为50%宽？
我也需要元素，在视觉上在同一行，以具有相同的高度。
如果需要的话，我可以使用flexbox。在这个演示中，容器的宽度是固定的，但实际上它是一个响应式布局，所以宽度是不同的。
http://codepen.io/anon/pen/yJoPwK
.cont {
display: flex;
flex-direction: column;
border: 1px solid grey;
width: 200px;
margin: auto;
}
.item-1 {
background: blue;
}
.item-2 {
background: green;
}
.item-3 {
background: yellow;
}
.item-4 {
background: blue;
}
.item-5 {
background: grey;
}
.item-6 {
background: orange;
}
.item-7 {
background: gold;
}
.item-4,
.item-5,
.item-6,
.item-7 {
width: 50%;
}<div class="cont">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4 <br> wrap</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
</div>
这是我想要实现的布局：
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-07 22:20:03
您可以将容器设置为flex-flow: row wrap;
将前3个flex项设置为width: 100%;，最后4个项设置为width: 50%;
.cont {
display: flex;
flex-flow: row wrap;
border: 1px solid grey;
width: 200px;
margin: auto;
}
.item-1 { background: blue; }
.item-2 { background: green; }
.item-3 { background: yellow; }
.item-4 { background: blue; }
.item-5 { background: grey; }
.item-6 { background: orange; }
.item-7 { background: gold; }
.item-1, .item-2, .item-3 { width: 100%; }
.item-4, .item-5, .item-6, .item-7 { width: 50%; }<div class="cont">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4 <br> wrap</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
</div>
Stack Overflow用户
发布于 2016-07-07 22:17:32
在.item-4和item-5中创建两个子元素item-4-1、item-4-2
然后.item-4, .item-5{display: flex}会做这件事
演示
.cont {
display: flex;
flex-direction: column;
border: 1px solid grey;
width: 200px;
margin: auto;
}
.item-1 {
background: blue;
}
.item-2 {
background: green;
}
.item-3 {
background: yellow;
}
.item-4 {
background: blue;
}
.item-5 {
}
.item-4, .item-5{
display: flex
}
.item-4 .sub-item, .item-5 .sub-item{
width: 50%;
}
.item-4 .item-4-2{
background: grey;
}
.item-5-1 {
background: orange;
}
.item-5-2 {
background: gold;
}<div class="cont">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">
<div class="sub-item item-4-1">4 <br> wrap</div>
<div class="sub-item item-4-2">5</div>
</div>
<div class="item item-5">
<div class="sub-item item-5-1">6</div>
<div class="sub-item item-5-2">7</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38247705
复制相关文章
相似问题
腾讯云开发者
