¿Cómo obtener flexbox para incluir relleno en los cálculos?
Debajo hay dos filas.
Primera fila son dos artículos enflex 1
y uno enflex 2
.
Segunda fila son dos artículos enflex 1
.
De acuerdo a las especificaciones1A + 1B = 2A
Pero cuandorelleno está incluido en el cálculo, la suma es incorrecta, como puede ver en el ejemplo a continuación.
PREGUNTA
<, p> ¿Cómo hacer que el cuadro flexible incluya relleno en su cálculo para que los cuadros en el ejemplo se alineen correctamente?.Row{
display:flex;
}
.Item{
display:flex;
flex:1;
flex-direction:column;
padding:0 10px 10px 0;
}
.Item > div{
background:#7ae;
}
.Flx2{
flex:2;
}
<div class="Row">
<div class="Item">
<div>1A</div>
</div>
<div class="Item">
<div>1B</div>
</div>
<div class="Item Flx2">
<div>1C</div>
</div>
</div>
<div class="Row">
<div class="Item">
<div>2A</div>
</div>
<div class="Item">
<div>2B</div>
</div>
</div>