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 两行两列的主要内容,如果未能解决你的问题,请参考以下文章

怎么使得Latex控制两行两列图形间距一致

三 div / 两列布局 - 可以使用 Flexbox 吗?

如图,怎么将excell表中一个数据占用两行两列调整呈值占用一列一行?

Flexbox 布局,桌面上有两列,移动设备上有一列

div+css怎么显示两行或三行文字,然后多出的部分省略号代替??

CSS Flexbox:flex-wrap一个div到两行,每行都有单独的增长