Flexbox Two Rows Two Columns
32,572
Hope this will be the solution four your problem
.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>
Here is the working jsFiddle demo.
Author by
user7339434
Updated on January 04, 2020Comments
-
user7339434 over 4 years
<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; }
I want something like this https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/
I cant change my structure . i want a solution with flexbox.
Order of div dosent matter much as long as they have same one parent.
I tried using
flex:wrap
. with width,height = 50% of two divs and width ,height = 50%,33.3% of rest three but it gave me somthing like https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/.
Can anyone Help me out ?
-
user7339434 over 7 yearsthats not what i wanted to do but anyways thanks i changed my structure