Flexbox, o "Flexible Box Layout", es un modelo de diseño en CSS que permite diseñar diseños de cajas de una manera más eficiente y fácil de mantener en comparación con los modelos de diseño más antiguos, como los basados en bloques y en línea.
Con Flexbox, se pueden crear diseños que se ajusten automáticamente al tamaño de la pantalla y al contenido, lo que los hace ideales para aplicaciones web responsivas y diseño de interfaces de usuario complejas.
Flexbox se basa en contenedores flexibles y elementos flexibles. El contenedor flexible (elemento padre) tiene la propiedad display establecida en flex, lo que convierte a sus elementos secundarios en elementos flexibles. Luego, se pueden usar varias propiedades de Flexbox en el contenedor flexible para controlar cómo se distribuyen y alinean los elementos secundarios dentro de él.
Los ejemplos usaran los siguientes estilos
Code:
<style>
.example-style {
background-color: #22A658;
padding: 10px;
}
.example-style > div {
background-color: #ffffff;
margin: 10px;
padding: 10px;
font-size: 20px;
}
</style>
Se visualiza
Code:
<div class="example-style">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
View:
Code:
<style>
.flex-container {
display: flex;
}
</style>
<div class="example-style flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
View: