Question

<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/

这样的东西

任何人都可以帮助我吗？

Answer 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 演示。

Answer 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：

.flexbox{display : inline-flex;
height:500px;
width:500px;}

Flexbox两列两列

2 个答案: