Elementos flex en CSS
Además de los tipos de modelos de bloques que hemos estudiado,
hay otro más: los elementos flex. Para obtener
tales elementos, es necesario escribir en el padre
de estos elementos la propiedad display
con el valor flex. El padre mismo permanecerá
como un elemento de bloque, pero sus descendientes se convertirán
en elementos flex.
Los elementos flex, de manera similar a los elementos de bloque, pueden tener
ancho y alto, margin y padding.
Sin embargo, a diferencia de los elementos de bloque, por defecto
los elementos flex se alinean en una fila dentro
de su padre.
Intentémoslo:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* los descendientes serán elementos flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
