/ / Little Grid z Flexbox - css, css3, flexbox

Little Grid z Flexbox - css, css3, flexbox

Próbuję stworzyć tę małą galerię galerii z flexboxem, ale cały czas mi się nie udaje.

wprowadź opis obrazu tutaj

Czy to możliwe z Flexbox? Oto mój przykład i skrzypce.

<div class="gallery">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
<div class="box four">Box 4</div>
<div class="box five">Box 5</div>
</div>

.gallery {
display:flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;}

.gallery .box {
background:#ccc;
height:250px;
width:33.33333%;}

.gallery .box.one,
.gallery .box.two {
-webkit-flex:1;
flex: 1;}

.gallery .box.three {
height:500px;}

.gallery .box.four,
.gallery .box.five {
-webkit-flex:1;
flex: 1;}

Odpowiedzi:

1 dla odpowiedzi № 1

Ok, więc próbowałeś użyć flex-direction: column? Wymaga to niewielkiej zmiany w sposobie myślenia o Flexbox. Spróbuj wykonać następujące czynności:

.gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 200px; // or however you want to do it, required for wrapping
}

.box {
height: 100px;
}

.three {
height: 200px;
}

0 dla odpowiedzi nr 2

Możesz spróbować czegoś takiego:

  1. utwórz 3 elementy nadrzędne.
  2. utwórz dwa elementy div dla dzieci w 1 i 3 stopniu div o szerokości 100% i wysokości 50% i flex-direction column.

#grid{
width:100%;
height:500px;
background:#eee;
display:flex;

}
#p1,#p2,#p3{
width:33%;
border:2px solid #fff;
display:flex;
flex-direction:column;
}
#pone,#ptwo,#p31,#p32{
flex-basis:100%;
height:50%;
border:3px solid white;


}
<div id="grid">


<div id="p1">
<div id="pone">

</div>
<div id="ptwo">

</div>
</div>
<div id="p2">

</div>
<div id="p3">
<div id="p31">

</div>
<div id="p32">

</div>

</div>
</div>