/ / Little Grid s Flexboxom - css, css3, flexbox

Malá sieť s Flexboxom - css, css3, flexbox

Pokúšam sa vytvoriť túto malú galeriu s flexboxom, ale neustále zlyhám.

tu zadajte popis obrázku

Je možné s flexboxom? Tu je môj príklad a husle.

<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;}

odpovede:

1 pre odpoveď č. 1

Ok, tak ste sa pokúsili použiť flex-direction: column? Vyžaduje miernu zmenu v spôsobe, akým si myslíte o flexboxu. Vyskúšajte nasledujúce:

.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 pre odpoveď č. 2

Môžete to vyskúšať takto:

  1. vytvorte 3 div. div.
  2. vytvorte dve dievčatá v každej 1. a 3. divi so šírkou 100% a výškou 50% a flex-smer 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>