/ / Kleines Gitter mit Flexbox - css, css3, flexbox

Kleines Gitter mit Flexbox - css, css3, flexbox

Ich versuche, dieses kleine Galerieraster mit flexbox zu erstellen, aber ich scheitere die ganze Zeit.

Bildbeschreibung hier eingeben

Ist es mit Flexbox möglich? Hier ist mein Beispiel und Geige.

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

Antworten:

1 für die Antwort № 1

Ok, also hast du es versucht flex-direction: column? Es erfordert eine kleine Änderung in der Art, wie Sie über Flexbox nachdenken. Versuche Folgendes:

.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 für die Antwort № 2

Sie können so etwas ausprobieren:

  1. Erstelle 3 Eltern-Divs.
  2. Erstelle zwei Kind-Divs in jedem 1. und 3. Teil mit einer Breite von 100% und einer Höhe von 50% und Flex-Richtung 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>