Sono nuovo in flexbox, quindi per favore portami con me. Il mio html:Flexbox: 3 div, 2 colonne
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Con FlexBox, io sto cercando di realizzare il seguente schema:
.
Qual è il modo più semplice per ottenere questo senza impostare un'altezza per il contenitore?. Si prevede un cambio di altezza.
È possibile ottenere questo impostando flex-direction a column.
Come richiesto, la larghezza del secondo div è statica. Sto usando calc per gli altri 2 div.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
}
.one,
.three {
flex: 0 0 50%;
background: cyan;
width: calc(100% - 100px);
}
.two {
flex: 0 0 100%;
order: 1;
background: moccasin;
width: 100px;
}
.three {
background: tomato;
}<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>EDIT .... risposta tarda, iI lasciarlo poiché approccio sembra un po 'diverso dagli altri addirittura che credo sia molto simile .. ma non c'era molta scelta sul modo in cui flex funziona :)
Potrebbe essere necessario impostare un height nel contenitore padre e figlio nella prima colonna. order organizzerà il flusso dei contenitori.
codepen to check behavior and how it breaks while windows is reduced or content increased
.one {
background: #A1EB88;
}
.two {
background: #E7AAF6
}
.three {
background: #F7F467
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50vh;/* height is needed to force wrapping */
}
.one,
.three {
order: -1;/* bring them in front of other(s) */
height: 50%;/* share the height (if three of them, then put it down to 33.33% to share evenly height avalaible) */
}
.two {
flex: 1;/* equals height:100%; it will fill entire height */
width: 200px;/* here your fixed width */
}<h1>test it also in full page mode </h1>
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
E 'possibile fare questo senza impostare l'altezza per il contenitore? Entrambi .one e .three cambieranno in altezza. – Leah