Linha Flexbox: como esticar as crianças para preencher o eixo transversal?
tenho uma flexbox esquerda-direita:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
60
2 answers
Os filhos de um contentor row-flexbox preenchem automaticamente o espaço vertical do contentor.
Indique
flex: 1;
para uma criança se quiser que ela preencha o espaço horizontal restante:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
- especifique
flex: 1;
para ambas as crianças se quiser que elas preencham quantidades iguais do espaço horizontal:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > div
{
flex: 1;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
85
Author: Alex Shesterov, 2015-04-06 15:31:10
Enche a altura do Invólucro! testei-o em cromado e Firefox e não houve problema. talvez tenha simplificado demasiado o seu código.
pode testar esta opção ajustando {[[0]} para crianças ou ajustando
align-items: center
em invólucro.
0
Author: samad montazeri, 2015-09-01 08:48:39