Flexbox 两行两列
Posted
技术标签:
【中文标题】Flexbox 两行两列【英文标题】:Flexbox Two Rows Two Columns 【发布时间】:2017-05-17 07:09:25 【问题描述】:<div class="flexbox">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
.flexbox
height:500px;
width:500px;
我想要这样的东西https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/
我不能改变我的结构。我想要一个带有 flexbox 的解决方案。
只要它们有相同的一个父级,div 的顺序就很重要。
我尝试使用 flex:wrap
。宽度、高度 = 两个 div 的 50% 和宽度、高度 = 其余三个的 50%、33.3% 但它给了我类似https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/
.
谁能帮帮我?
【问题讨论】:
【参考方案1】:希望这将是您的问题的解决方案四
.flexbox
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
.flexbox div
width: 40%;
background: green;
height: 30%;
.flexbox .one, .flexbox .two
height: 45%;
<div class="flexbox">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
</div>
这是工作 jsFiddle 演示。
【讨论】:
【参考方案2】:试试这个:
<div class="flexbox">
<div class="left-side">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="right-side">
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
</div>
css:
.flexboxdisplay : inline-flex;
height:500px;
width:500px;
【讨论】:
这不是我想做的,但无论如何谢谢我改变了我的结构以上是关于Flexbox 两行两列的主要内容,如果未能解决你的问题,请参考以下文章
三 div / 两列布局 - 可以使用 Flexbox 吗?
如图,怎么将excell表中一个数据占用两行两列调整呈值占用一列一行?