Principiantecss
Flexbox
Aprende el modelo de layout flexible para crear alineaciones y distribuciones de una dimension.
Conceptos de Flexbox
Flexbox es un modelo de layout unidimensional (fila o columna). El contenedor flex controla como se distribuyen los hijos. Las propiedades clave son
justify-content (eje principal) y align-items (eje cruzado).Propiedades del contenedor
El contenedor flex distribuye, alinea y espacea los elementos hijos automaticamente.
css
1.navbar {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 gap: 1rem;
6 padding: 0 2rem;
7}
8
9.sidebar {
10 display: flex;
11 flex-direction: column;
12 gap: 0.5rem;
13}
14
15/* Centrado perfecto */
16.hero {
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 min-height: 100vh;
21}Propiedades del hijo
flex-grow, flex-shrink y flex-basis controlan como cada hijo ocupa el espacio disponible.css
1.container {
2 display: flex;
3 gap: 1rem;
4}
5
6/* El sidebar tiene ancho fijo, el main crece */
7.sidebar { flex: 0 0 250px; }
8.main { flex: 1; }
9
10/* Distribuir hijos equitativamente */
11.grid-equal > * {
12 flex: 1;
13}
14
15/* Permitir que se envuelvan en multiples lineas */
16.tags {
17 display: flex;
18 flex-wrap: wrap;
19 gap: 0.5rem;
20}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output