Diseño flexible con Flexbox
Introducción Flexbox
Flexbox puede compararse con un estante ajustable que organiza objetos según el espacio disponible.
El contenedor flex sería el estante, y los ítems flexibles serían los libros o cajas colocados en él.
Cuando el estante es ancho, los objetos se distribuyen con más espacio entre sí; si el espacio se reduce, los objetos se acercan, se encogen o se reacomodan automáticamente.
Propiedades como justify-content definen cómo se reparten los objetos
a lo largo del estante (alineados a la izquierda, al centro o con espacio entre ellos), mientras que align-items controla cómo se alinean verticalmente dentro del estante.
Si los objetos no caben en una sola fila, flex-wrap permite crear otra
repisa para acomodarlos.
En conjunto, Flexbox funciona como un estante inteligente que ajusta la posición y el tamaño de su contenido para aprovechar al máximo el espacio disponible.
Conceptos Básicos
El módulo Flexbox Layout (Caja Flexible), reconocido como una Recomendación
Candidata por el W3C desde octubre de 2017, fue creado para ofrecer un método más eficaz de
organización, alineación y distribución del espacio entre los elementos de un contenedor, incluso cuando
sus dimensiones son desconocidas o variables (de ahí el término “flex”, por flexible).
La esencia del diseño flexible consiste en otorgar al contenedor la capacidad de ajustar el ancho, la altura e incluso el orden de sus elementos, optimizando así el uso del espacio disponible y permitiendo una mejor adaptación a distintos dispositivos y resoluciones de pantalla.
Un contenedor flexible puede ampliar los elementos para ocupar el espacio libre o reducirlos automáticamente para evitar que se desborden fuera de sus límites.
Una característica clave de Flexbox es que no está limitado a una orientación específica, a diferencia de
los modelos tradicionales: el modelo block, que organiza los elementos
en dirección vertical, y el modelo inline, que lo hace en dirección
horizontal.
Aunque esos modelos funcionan adecuadamente en estructuras de páginas simples, carecen de la flexibilidad necesaria para responder a los desafíos de aplicaciones más grandes o complejas, especialmente cuando se requiere ajustar la orientación, redimensionar, estirar o comprimir los elementos.
Nota: Flexbox resulta ideal para el diseño
de componentes individuales y estructuras pequeñas, mientras
que CSS Grid está orientado a la creación de diseños más amplios y de nivel superior.
Flexbox vs. Grid:
CSS Flexbox se utiliza para diseños unidimensionales, con filas o columnas.
CSS Grid se utiliza para diseños bidimensionales, con filas y columnas.
CSS Flexbox se utiliza para diseños unidimensionales, con filas o columnas.
CSS Grid se utiliza para diseños bidimensionales, con filas y columnas.
Antes de iniciar con las propiedades de Flexbox, es importante comprender los conceptos clave que subyacen a su funcionamiento:
- Contenedor flexible (Flex Container): Es el elemento HTML al que se
aplica la propiedad
display: flexodisplay: inline-flex. Al hacerlo, se convierte en un contenedor principal que establece un contexto flexible para organizar sus elementos internos. - Elementos Flex (Flex Items): Los hijos directos del contenedor flex. Estos elementos se convierten en elementos flexibles y se organizan según las propiedades de Flexbox.
- Eje Principal (Main Axis): El eje a lo largo del cual se organizan los
elementos flex. La dirección del eje principal se define con la propiedad
flex-direction. - Eje Transversal (Cross Axis): El eje perpendicular al eje principal. La
alineación de los elementos flex a lo largo del eje transversal se controla con la propiedad
align-itemsyalign-content.
Contenedor Flexible
¿Qué es Convertir un Contenedor en Flexible?
Cuando se activa Flexbox en un contenedor (display: flex), por
defecto los elementos hijos se organizan en una sola fila horizontal (flex-direction: row), comenzando desde la izquierda hacia la derecha.
Cada elemento mantiene su tamaño natural y no se ajusta automáticamente al ancho total del
contenedor, ya que el valor predeterminado de flex-wrap es nowrap
(todos los elementos permanecen en una sola línea).
Además, los elementos se alinean al inicio del eje principal (justify-content: flex-start) y se estiran para ocupar toda la altura del
contenedor a lo largo del eje transversal (align-items:
stretch).
En resumen, por defecto Flexbox distribuye los elementos en fila, sin envolver, alineados al inicio y estirados verticalmente.
Contenedor Normal
1
2
3
Contenedor Flex
1
2
3
<div>
<p>Contenedor Normal</p>
<div class="ej-normal-contenedor">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p>Contenedor Flex</p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-elemento-flex:nth-child(3) {
border-right: 3px solid red;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
/* flex-direction */
.ej-flex {
display: flex;
}
El elemento contenedor flexible puede tener las siguientes propiedades:
display: flex | inline-flex
La propiedad display: flex o display: inline-flex activa el modelo de diseño
flexible (Flexbox) en
un elemento HTML:
display: flex;: convierte al elemento en un contenedor flexible de tipo bloque, ocupando todo el ancho disponible y ubicándose en una nueva línea.display: inline-flex;: crea también un contenedor flexible, pero de tipo en línea, lo que permite que se sitúe junto a otros elementos sin ocupar toda la fila.
display: flex;
1
2
3
display: inflex;
1
2
3
flex-direction: column;
display: flex;
1
2
3
display: inflex;
1
2
3
<div>
<p><code class="language-css">display: flex;</code></p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">display: inflex;</code></p>
<div class="ej-normal-contenedor ej-inline-flex">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">display: flex;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">display: inflex;</code></p>
<div class="ej-normal-contenedor ej-inline-flex ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
/* display */
.ej-inline-flex {
display: inline-flex;
}
En ambos casos, los hijos directos del contenedor se convierten en elementos flexibles (flex items), que pueden alinearse, distribuirse y dimensionarse dinámicamente según las propiedades del modelo Flexbox.
flex-direction: row | row-reverse | column | column-reverse;
La propiedad flex-direction define la dirección
del eje principal
en un contenedor flexible (Flexbox), determinando cómo se colocan los elementos flexibles (flex
items) dentro del contenedor:
row(valor por defecto): Los elementos se organizan en una fila horizontal, de izquierda a derecha. El eje principal es horizontal y el eje transversal es vertical.row-reverse:Los elementos se organizan en una fila horizontal, pero en sentido inverso, de derecha a izquierda. El eje principal sigue siendo horizontal, pero con dirección invertida.column: Los elementos se organizan en una columna vertical, de arriba hacia abajo. El eje principal es vertical y el eje transversal es horizontal.column-reverse: Los elementos se organizan en una columna vertical, pero en sentido inverso, de abajo hacia arriba. El eje principal es vertical, con dirección invertida.
flex-direction: row;
1
2
3
flex-direction: row-reverse;
1
2
3
flex-direction: column;
1
2
3
flex-direction: column-reverse;
1
2
3
<div>
<p><code class="language-css">flex-direction: row;</code></p>
<div class="ej-normal-contenedor ej-flex ej-row">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">flex-direction: row-reverse;</code></p>
<div class="ej-normal-contenedor ej-flex ej-row-reverse">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">flex-direction: column;</code></p>
<div class="ej-normal-contenedor ej-flex ej-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">flex-direction: column-reverse;</code></p>
<div class="ej-normal-contenedor ej-flex ej-column-reverse">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-contenedor-flex {
display: flex;
padding: 20px;
border: 3px solid green;
}
.ej-flex-elemento-flex {
border-top: 3px solid red;
border-bottom: 3px solid red;
border-left: 3px solid red;
width: 100px;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
/* flex-direction */
.ej-flex {
display: flex;
}
.ej-row {
flex-direction: row;
}
.ej-row-reverse {
flex-direction: row-reverse;
}
.ej-column {
flex-direction: column;
}
.ej-column-reverse {
flex-direction: column-reverse;
}
En resumen, flex-direction controla la orientación y el sentido
en
que los elementos flexibles se disponen dentro del contenedor.
flex-wrap: nowrap | wrap | wrap-reverse;
La propiedad flex-wrap en Flexbox controla si los elementos
flexibles
(flex items) deben permanecer en una sola línea o si pueden pasar a una nueva línea cuando el espacio
del contenedor no es suficiente:
nowrap(valor por defecto): Todos los elementos flexibles se colocan en una sola línea, incluso si exceden el ancho del contenedor. Esto puede hacer que los elementos se compriman para caber en el espacio disponible.wrap: Los elementos flexibles se distribuyen en varias líneas cuando el espacio no alcanza. Las líneas adicionales se colocan debajo de la anterior (en dirección normal del flujo).wrap-reverse: Similar a wrap, pero las líneas adicionales se colocan encima de la línea inicial, invirtiendo el orden vertical del apilamiento.
flex-wrap: nowrap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
flex-wrap: wrap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
flex-wrap: wrap-reverse;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
flex-direction: column;
flex-wrap: nowrap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
La caja con la configuraciónflex-wrap: nowrap yflex-direction: column; como las 16 cajas no caben en el
contenedor, se desborda del área visible. Se usa overflow-y: auto;
auto; para agregar
scroll vertical y poder ver todos los elementos.
flex-wrap: wrap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
flex-wrap: wrap-reverse;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
<div>
<div>
<p><code class="language-css">flex-wrap: nowrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-nowrap">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
<div>
<p><code class="language-css">flex-wrap: wrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-wrap">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
<div>
<p><code class="language-css">flex-wrap: wrap-reverse;</code></p>
<div class="ej-normal-contenedor ej-flex ej-wrap-reverse">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
<p><code class="language-css">flex-wrap: nowrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-nowrap ej-flex-column ej-flex-overflow-y ej-altura">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
<div>
<p><code class="language-css">flex-wrap: wrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-wrap ej-flex-column ej-altura">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
<div>
<p><code class="language-css">flex-wrap: wrap-reverse;</code></p>
<div class="ej-normal-contenedor ej-flex ej-wrap-reverse ej-flex-column ej-altura">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">16</div>
</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 500px;
}
.ej-flex-overflow-y {
overflow-y: auto;
}
/* flex-wrap */
.ej-nowrap {
flex-wrap: nowrap;
}
.ej-wrap {
flex-wrap: wrap;
}
.ej-wrap-reverse {
flex-wrap: wrap-reverse;
}
En resumen, flex-wrap determina si los elementos flexibles deben
mantenerse en una sola línea o repartirse en varias, y en qué dirección deben hacerlo.
flex-flow: <flex-direction> <flex-wrap>;
La propiedad flex-flow es una propiedad
abreviada (shorthand) de Flexbox que combina dos propiedades en una sola declaración:
flex-direction: Define la dirección principal en la que se organizan los elementos flexibles (por ejemplo, en fila o en columna).flex-wrap: Controla si los elementos flexibles deben ajustarse (envolverse) a una nueva línea o permanecer todos en una sola línea.
Valores posibles
- Para
flex-wrap:row: Los elementos se organizan en una fila, de izquierda a derecha (valor por defecto).row-reverse: En una fila, pero de derecha a izquierda.column: En una columna, de arriba hacia abajo.column-reverse: En una columna, pero de abajo hacia arriba.
- Para
flex-wrap:nowrap: Todos los elementos permanecen en una sola línea (valor por defecto).wrap: Los elementos se ajustan a una nueva línea si no caben.wrap-reverse: Igual que wrap, pero las líneas se apilan en sentido inverso.
Valor por defecto para flex-flow
flex-flow: row nowrap;
Ejemplos con flex-flow
flex-flow: row nowrap;: Valores por defecto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
flex-flow: column wrap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
flex-flow: row wrap;:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
<p><code class="language-css">flex-flow: row nowrap;</code>: Valores por defecto</p>
<div class="ej-normal-contenedor ej-flex ej-flex-flow-row-nowrap">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">flex-flow: column wrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-flow-column-wrap">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
</div>
</div>
<br>
<div>
<p><code class="language-css">flex-flow: row wrap;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-flow-row-wrap">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
.ej-flex {
display: flex;
}
/* flex-flow */
.ej-flex-flow-row-nowrap {
flex-flow: row nowrap;
}
.ej-flex-flow-column-wrap {
height: 200px;
flex-flow: column wrap;
}
.ej-flex-flow-row-wrap {
height: 200px;
flex-flow: row wrap;
}
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
La propiedad justify-content en Flexbox se utiliza para alinear y
distribuir los elementos flexibles (flex items) a lo largo del eje principal (main axis) del
contenedor
flexible.
Su comportamiento depende del valor de flex-direction, ya que este
define si el eje principal es horizontal o vertical.
Valores principales de justify-content
flex-start: Alinea todos los elementos al inicio del eje principal. Es el valor por defecto.flex-end: Alinea todos los elementos al final del eje principal.center: Centra los elementos en el medio del eje principal.space-between: Distribuye los elementos dejando el mismo espacio entre ellos, sin espacio al inicio ni al final.space-around: Asigna espacios iguales alrededor de cada elemento, dejando la mitad del espacio en los extremos.space-evenly: Distribuye los elementos con espacios completamente iguales entre todos y también en los extremos.
Valores de Alineación más Recientes (CSS Box Alignment Level 3)
start: Alinea los elementos al inicio físico del contenedor (distingue entre direcciones LTR y RTL).end: Alinea los elementos al final físico del contenedor.left: Alinea al lado izquierdo, sin importar la dirección del texto.right: Alinea al lado derecho, sin importar la dirección del texto.
Estos valores (
start, end, left, right) tienen un soporte más
reciente y su comportamiento puede
variar según el navegador.Ejemplos con justify-content
justify-content: flex-start;
1
2
3
justify-content: flex-end;
1
2
3
justify-content: center;
1
2
3
justify-content: space-between
1
2
3
justify-content: space-around;
1
2
3
justify-content:space-evenly;
1
2
3
flex-direction: column;
justify-content: flex-start;
1
2
3
justify-content: flex-end;
1
2
3
justify-content: center;
1
2
3
justify-content: space-between
1
2
3
justify-content: space-around;
1
2
3
justify-content:space-evenly;
1
2
3
<div>
<div>
<p><code class="language-css">justify-content: flex-start;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-start">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: flex-end;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-end">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: center;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-center">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: space-between</code></p>
<div class="ej-normal-contenedor ej-flex ej-space-between">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: space-around;</code></p>
<div class="ej-normal-contenedor ej-flex ej-justify-space-around">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content:space-evenly;</code></p>
<div class="ej-normal-contenedor ej-flex ej-justify-space-evenly ">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div>
<p><code class="language-css">justify-content: flex-start;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-start ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: flex-end;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-end ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: center;</code></p>
<div class="ej-normal-contenedor ej-flex ej-flex-center ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: space-between</code></p>
<div class="ej-normal-contenedor ej-flex ej-space-between ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content: space-around;</code></p>
<div class="ej-normal-contenedor ej-flex ej-justify-space-around ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
<div>
<p><code class="language-css">justify-content:space-evenly;</code></p>
<div class="ej-normal-contenedor ej-flex ej-justify-space-evenly ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-contenedor-normal {
padding: 20px;
border: 3px solid green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 500px;
}
/* justify-content */
.ej-flex-start {
justify-content: flex-start;
}
.ej-flex-end {
justify-content: flex-end;
}
.ej-flex-center {
justify-content: center;
}
.ej-space-between {
justify-content: space-between;
}
.ej-justify-space-around {
justify-content: space-around;
}
.ej-justify-space-evenly {
justify-content: space-evenly;
}
justify-content controla cómo se reparten los elementos flexibles
a
lo largo del eje principal, determinando su posición y el espacio entre ellos dentro del contenedor
flexible.
align-items: stretch | flex-start | flex-end | center | baseline | normal | start | end;
La propiedad align-items en Flexbox se utiliza para alinear los
elementos flexibles a lo largo del eje transversal (cross axis), es decir, en dirección perpendicular
al
eje principal definido por flex-direction.
Afecta a todos los elementos flexibles dentro del contenedor, y su comportamiento depende del tamaño del contenedor y del alto o ancho de los elementos, según la orientación del eje.
stretch(valor por defecto): Los elementos flexibles se estiran para ocupar todo el espacio disponible en el eje transversal. Ejemplo: en una fila (flex-direction: row), los ítems se estiran verticalmente para igualar la altura del contenedor.flex-start: Los elementos se alinean al inicio del eje transversal (parte superior si el eje es vertical).flex-end:Los elementos se alinean al final del eje transversal (parte inferior si el eje es vertical).center: Los elementos se centran a lo largo del eje transversal.baseline: Los elementos se alinean según la línea base del texto, útil cuando tienen diferentes alturas o tamaños de fuente.normal(nuevo valor en especificaciones modernas): Indica que los elementos siguen el comportamiento de alineación predeterminado del modelo de caja, equivalente a stretch en la mayoría de los casos.startyend(nuevos valores lógicos): Permiten alinear los elementos al inicio o final lógico del eje transversal, considerando la dirección del texto o escritura (writing-mode), a diferencia deflex-startyflex-end, que son físicos.
align-items: stretch;
1
2
3
align-items: flex-start;
1
2
3
align-items: flex-end;
1
2
3
align-items: center;
1
2
3
align-items: baseline;
1
2
3
flex-direction: column;
align-items: stretch;
1
2
3
align-items: flex-start;
1
2
3
align-items: flex-end;
1
2
3
align-items: center;
1
2
3
<div>
<div>
<p><code class="language-css">align-items: stretch;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-stretch">
<div class="ej-flex-elemento-align-items-stretch">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: flex-start;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-start">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: flex-end;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-end">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: center;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-center">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: baseline;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-baseline">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div>
<p><code class="language-css">align-items: stretch;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-stretch ej-altura ej-flex-column">
<div class="ej-flex-elemento-align-items-stretch">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: flex-start;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-start ej-altura ej-flex-column">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: flex-end;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-end ej-altura ej-flex-column">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
<div>
<p><code class="language-css">align-items: center;</code></p>
<div class="ej-normal-contenedor-items ej-flex ej-align-items-center ej-altura ej-flex-column">
<div class="ej-flex-elemento-align-items">1</div>
<div class="ej-flex-elemento-align-items">2</div>
<div class="ej-flex-elemento-align-items">3</div>
</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor-items {
padding: 10px;
border: 3px solid green;
background-color: green;
height: 320px
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 320px;
}
/* align-items */
.ej-flex-elemento-align-items {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-elemento-align-items:nth-child(2) {
height: 70px;
font-size: 50px;
}
.ej-flex-elemento-align-items:nth-child(3) {
height: 80px;
font-size: 30px;
padding-bottom: 30px;
}
.ej-align-items-stretch {
align-items: stretch
}
.ej-align-items-start {
align-items: flex-start;
}
.ej-align-items-end {
align-items: flex-end;
}
.ej-align-items-center {
align-items: center;
}
.ej-align-items-baseline {
align-items: baseline;
}
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
La propiedad align-content en Flexbox controla cómo se distribuyen
las líneas del contenedor flexible a lo largo del eje transversal (el eje perpendicular al eje
principal), cuando existen múltiples líneas de elementos (es decir, cuando flex-wrap está en wrap o wrap-reverse).
En otras palabras, align-content no afecta a los elementos
individuales, sino al espacio entre las filas o columnas completas dentro del contenedor.
stretch(valor por defecto): Las líneas se estiran para ocupar todo el espacio disponible en el eje transversal.flex-start: Todas las líneas se agrupan al inicio del eje transversal (por ejemplo, en la parte superior si el eje es vertical).flex-end: Todas las líneas se agrupan al final del eje transversal.center: Las líneas se agrupan en el centro del eje transversal.space-between: La primera línea se coloca al inicio y la última al final del eje transversal; el espacio restante se reparte equitativamente entre las líneas intermedias.space-around: Se distribuye espacio igual alrededor de cada línea; esto genera medio espacio al inicio y al final del contenedor.space-evenly: Se asigna el mismo espacio entre todas las líneas, incluyendo los bordes del contenedor.
align-content: stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-start;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-between;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-around;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-evenly;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flex-direction: column;
align-content: stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-start;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-between;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-around;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-evenly;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<div>
<p><code class="language-css">align-content: stretch;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-stretch">
<div class="ej-flex-elemento-stretch">1</div>
<div class="ej-flex-elemento-stretch">2</div>
<div class="ej-flex-elemento-stretch">3</div>
<div class="ej-flex-elemento-stretch">4</div>
<div class="ej-flex-elemento-stretch">5</div>
<div class="ej-flex-elemento-stretch">6</div>
<div class="ej-flex-elemento-stretch">7</div>
<div class="ej-flex-elemento-stretch">8</div>
<div class="ej-flex-elemento-stretch">9</div>
<div class="ej-flex-elemento-stretch">10</div>
<div class="ej-flex-elemento-stretch">11</div>
<div class="ej-flex-elemento-stretch">12</div>
<div class="ej-flex-elemento-stretch">13</div>
<div class="ej-flex-elemento-stretch">14</div>
<div class="ej-flex-elemento-stretch">15</div>
<div class="ej-flex-elemento-stretch">16</div>
<div class="ej-flex-elemento-stretch">17</div>
<div class="ej-flex-elemento-stretch">18</div>
<div class="ej-flex-elemento-stretch">19</div>
<div class="ej-flex-elemento-stretch">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: flex-start;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-flex-start">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: flex-end;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-flex-end">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: center;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-center">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-between;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-between">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-around;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-around">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-evenly;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-evenly">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div>
<p><code class="language-css">align-content: stretch;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-stretch ej-altura ej-flex-column">
<div class="ej-flex-elemento-stretch-horizontal">1</div>
<div class="ej-flex-elemento-stretch-horizontal">2</div>
<div class="ej-flex-elemento-stretch-horizontal">3</div>
<div class="ej-flex-elemento-stretch-horizontal">4</div>
<div class="ej-flex-elemento-stretch-horizontal">5</div>
<div class="ej-flex-elemento-stretch-horizontal">6</div>
<div class="ej-flex-elemento-stretch-horizontal">7</div>
<div class="ej-flex-elemento-stretch-horizontal">8</div>
<div class="ej-flex-elemento-stretch-horizontal">9</div>
<div class="ej-flex-elemento-stretch-horizontal">10</div>
<div class="ej-flex-elemento-stretch-horizontal">11</div>
<div class="ej-flex-elemento-stretch-horizontal">12</div>
<div class="ej-flex-elemento-stretch-horizontal">13</div>
<div class="ej-flex-elemento-stretch-horizontal">14</div>
<div class="ej-flex-elemento-stretch-horizontal">15</div>
<div class="ej-flex-elemento-stretch-horizontal">16</div>
<div class="ej-flex-elemento-stretch-horizontal">17</div>
<div class="ej-flex-elemento-stretch-horizontal">18</div>
<div class="ej-flex-elemento-stretch-horizontal">19</div>
<div class="ej-flex-elemento-stretch-horizontal">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: flex-start;</code></p>
<div
class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-flex-start ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: flex-end;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-flex-end ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: center;</code></p>
<div class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-center ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-between;</code></p>
<div
class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-between ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-around;</code></p>
<div
class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-around ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
<div>
<p><code class="language-css">align-content: space-evenly;</code></p>
<div
class="ej-normal-contenedor-aling-content ej-flex ej-wrap ej-align-content-space-evenly ej-altura ej-flex-column">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
<div class="ej-flex-elemento">7</div>
<div class="ej-flex-elemento">8</div>
<div class="ej-flex-elemento">9</div>
<div class="ej-flex-elemento">10</div>
<div class="ej-flex-elemento">11</div>
<div class="ej-flex-elemento">12</div>
<div class="ej-flex-elemento">13</div>
<div class="ej-flex-elemento">14</div>
<div class="ej-flex-elemento">15</div>
<div class="ej-flex-elemento">16</div>
<div class="ej-flex-elemento">17</div>
<div class="ej-flex-elemento">18</div>
<div class="ej-flex-elemento">19</div>
<div class="ej-flex-elemento">20</div>
</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-flex {
display: flex;
}
.ej-wrap {
flex-wrap: wrap;
}
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 320px;
}
.ej-flex-elemento-stretch {
padding: 20px;
border: 3px solid green;
background-color: green;
width: 65px;
border: 3px solid red;
background-color: white;
color: black;
}
.ej-flex-elemento-stretch-horizontal {
padding: 20px;
border: 3px solid green;
background-color: green;
height: 65px;
border: 3px solid red;
background-color: white;
color: black;
}
/* flex-flow */
.ej-normal-contenedor-aling-content {
padding: 20px;
border: 3px solid green;
background-color: green;
height: 300px;
}
.ej-align-content-stretch {
align-content: stretch;
}
.ej-align-content-flex-start {
align-content: flex-start;
}
.ej-align-content-flex-end {
align-content: flex-end;
}
.ej-align-content-center {
align-content: center;
}
.ej-align-content-space-between {
align-content: space-between;
}
.ej-align-content-space-around {
align-content: space-around;
}
.ej-align-content-space-evenly {
align-content: space-evenly;
}
Los Elementos Flexibles
Definición Elementos flexibles (Flex Items)
Son los hijos directos de un contenedor flexible (es decir, de un elemento con display: flex o display:
inline-flex).
Cada uno de estos elementos se comporta de forma flexible dentro del contenedor, lo que significa que pueden crecer, encogerse o ajustarse automáticamente según el espacio disponible y las reglas definidas por las propiedades de Flexbox.
Su posición y tamaño se controlan mediante propiedades específicas, tanto del contenedor como de los propios elementos, entre ellas:
Del contenedor: justify-content, align-items, align-content, flex-wrap,
flex-direction, ya explicadas en la sección anterior.
Del elemento: flex-grow, flex-shrink, flex-basis, align-self, order.
Contenedor Flex
1
2
3
4
5
6
flex-direction: column;
Contenedor Flex
1
2
3
4
5
6
<div>
<p>Contenedor Flex</p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento">1</div>
<div class="ej-flex-elemento">2</div>
<div class="ej-flex-elemento">3</div>
<div class="ej-flex-elemento">4</div>
<div class="ej-flex-elemento">5</div>
<div class="ej-flex-elemento">6</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento-item {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex {
display: flex;
}
/* Definición Elementos flexibles (Flex Items) */
.ej-flex-elemento {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
order: <número>;
La propiedad order en Flexbox define el orden visual en el que se
muestran los elementos flexibles dentro de un contenedor, independientemente del orden en el código
HTML.
Por defecto, todos los elementos tienen order: 0. Los valores más bajos se muestran antes y los
valores
más altos después, siguiendo el eje principal definido por flex-direction.
<número>: puede tomar cualquier valor: positivo, negativo o cero.
order:
1
2
3
4
5
6
flex-direction: column;
1
2
3
4
5
6
<div>
<p><code classs="language-css">order</code>:</p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento-item order">1</div>
<div class="ej-flex-elemento-item order">2</div>
<div class="ej-flex-elemento-item order">3</div>
<div class="ej-flex-elemento-item order">4</div>
<div class="ej-flex-elemento-item order">5</div>
<div class="ej-flex-elemento-item order">6</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div class="ej-normal-contenedor ej-flex ej-altura ej-flex-column">
<div class="ej-flex-elemento-item order">1</div>
<div class="ej-flex-elemento-item order">2</div>
<div class="ej-flex-elemento-item order">3</div>
<div class="ej-flex-elemento-item order">4</div>
<div class="ej-flex-elemento-item order">5</div>
<div class="ej-flex-elemento-item order">6</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 320px;
}
/* order */
.order {
height: 65px;
}
.ej-flex-elemento-item {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-elemento-item:nth-child(4) {
order: 2;
background-color: cyan;
}
.ej-flex-elemento-item:nth-child(1) {
order: 3;
background-color: cyan;
}
La propiedad order no cambia la estructura del documento, solo el
orden de presentación visual en el diseño Flexbox.
Como es el orden visual final en la fila flex (de izquierda a derecha):
- Elementos con order: 0; (los más bajos): 2, 3, 5, 6 (mantienen su relativa posición del HTML).
- Luego order: 2;: 4 (fondo cian).
- Finalmente order: 3;: 1 (fondo cian).
flex-grow: <número>;
La propiedad flex-grow define cuánto puede crecer un elemento
flexible en relación con los demás elementos dentro del mismo contenedor Flexbox cuando hay espacio
libre disponible en el eje principal.
<número>: puede tomar cualquier valor: positivo o cero.
Valor por defecto: flex-grow: 0;
flex-grow controla la proporción de expansión de un elemento dentro
de
un contenedor flexible. Un valor mayor indica que el elemento ocupará más espacio disponible en
comparación con los demás.
flex-grow
1
2
3
4
5
6
flex-direction: column;
1
2
3
4
5
6
<div>
<p><code class="language-css">flex-grow</code></p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento-grow">1</div>
<div class="ej-flex-elemento-grow">2</div>
<div class="ej-flex-elemento-grow">3</div>
<div class="ej-flex-elemento-grow">4</div>
<div class="ej-flex-elemento-grow">5</div>
<div class="ej-flex-elemento-grow">6</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div class="ej-normal-contenedor ej-flex ej-altura ej-flex-column">
<div class="ej-flex-elemento-grow">1</div>
<div class="ej-flex-elemento-grow">2</div>
<div class="ej-flex-elemento-grow">3</div>
<div class="ej-flex-elemento-grow">4</div>
<div class="ej-flex-elemento-grow">5</div>
<div class="ej-flex-elemento-grow">6</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 320px;
}
/* flex-grow */
.ej-flex-elemento-grow {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-elemento-grow:nth-child(4) {
flex-grow: 2;
background-color: cyan;
}
.ej-flex-elemento-grow:nth-child(1) {
flex-grow: 1;
background-color: cyan;
}
Calculo de la Proporción de Crecimiento
La suma de los valores de flex-grow es 1 + 2 = 3. Esto define la proporción de reparto del espacio libre.
El item1 recibe 1/3 del espacio libre y el item2 recibe 2/3 del espacio libre.
flex-shrink: <número>;
La propiedad flex-shrink controla cuánto puede reducirse el tamaño
de
un elemento flexible (flex item) en relación con los demás cuando el espacio disponible en el
contenedor
es insuficiente.
Valor por defecto: flex-shrink: 1;
<valor>:
- 0: el elemento no se encoge, mantiene su tamaño base (definido por
width,flex-basiso su contenido). - 1 o mayor: el elemento se encoge proporcionalmente respecto a los
demás
elementos que también tengan
flex-shrink> 0. Cuanto mayor sea el valor, más espacio cederá ese elemento.
flex-shrink:
1
2
3
4
5
6
flex-direction: column;
1
2
3
4
5
6
<div>
<p><code class="language-css">flex-shrink</code>:</p>
<div class="ej-normal-contenedor ej-flex">
<div class="ej-flex-elemento-shrink">1</div>
<div class="ej-flex-elemento-shrink">2</div>
<div class="ej-flex-elemento-shrink">3</div>
<div class="ej-flex-elemento-shrink">4</div>
<div class="ej-flex-elemento-shrink">5</div>
<div class="ej-flex-elemento-shrink">6</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div class="ej-normal-contenedor ej-flex ej-altura300 ej-flex-column">
<div class="ej-flex-elemento-shrink">1</div>
<div class="ej-flex-elemento-shrink">2</div>
<div class="ej-flex-elemento-shrink">3</div>
<div class="ej-flex-elemento-shrink">4</div>
<div class="ej-flex-elemento-shrink">5</div>
<div class="ej-flex-elemento-shrink">6</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-normal-contenedor {
padding: 20px;
border: 3px solid green;
background-color: green;
}
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura300 {
height: 300px;
}
/* flex-shrink */
.ej-flex-elemento-shrink {
border: 3px solid red;
width: 100px;
height: 50px;
/* ← Agregar altura */
background-color: white;
color: black;
}
.ej-flex-elemento-shrink:nth-child(4) {
flex-shrink: 100;
background-color: cyan;
}
.ej-flex-elemento-shrink:nth-child(1) {
flex-shrink: 1;
background-color: cyan;
}
En conclusión, flex-shrink define la proporción de reducción de
tamaño de cada elemento flexible cuando el contenedor no puede mostrar todos los elementos en su
tamaño
ideal.
flex-basis: <valor>;
La propiedad flex-basis define el tamaño inicial de un elemento
flexible (flex item) antes de que el espacio disponible en el contenedor se distribuya según las
reglas
de Flexbox.
En otras palabras, establece la base sobre la cual se calculan los valores de crecimiento (flex-grow) y encogimiento (flex-shrink) del elemento.
<valor>:
auto: Valor por defecto. El tamaño base se calcula según el contenido, o según la propiedadwidthoheight(dependiendo de la dirección del eje principal).<longitud>: Un valor fijo como px, em, rem, etc.<porcentaje>: Un tamaño relativo al tamaño del contenedor flexible.0: Indica que el tamaño base inicial es cero; todo el espacio se distribuirá según flex-grow y flex-shrink.content: El tamaño se ajusta exactamente al contenido del elemento, sin considerarwidthoheight. (Soporte limitado en algunos navegadores).
flex: <flex-grow> <flex-shrink> <flex-basis>;
La propiedad flex en CSS es una propiedad abreviada (shorthand) que
combina tres propiedades individuales del modelo Flexbox:
flex-grow.flex-shrink.flex-basis.
Su función es controlar cómo los elementos flexibles (flex items) crecen, se encogen y establecen su tamaño base dentro de un contenedor flexible (flex container).
Valores abreviados comunes:
flex: 0 1 auto;: Valor por defecto (sin crecimiento, con encogimiento y tamaño automático).flex: 1;: Equivale aflex: 1 1 0;, permite que se ocupe todo el espacio disponible dentro del contenedor.flex-grow: 1;Permite que el elemento crezca para ocupar el espacio libre del contenedor. Si hay varios elementos conflex-grow: 1;, el espacio se reparte proporcionalmente entre ellos.flex-shrink: 1;Permite que el elemento se encoja si el contenedor es más pequeño que el contenido total.flex-basis: 0%;Indica el tamaño base del elemento antes de distribuir el espacio restante. Con 0%, el navegador ignora el ancho o alto inicial y reparte todo el espacio disponible según elflex-grow.
flex: none;: Equivale aflex: 0 0 auto;: el elemento no crece ni se encoge.flex: auto;: Equivale aflex: 1 1 auto;: el elemento crece y se encoge según el espacio disponible.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
La propiedad align-self en Flexbox permite controlar la alineación
individual de un elemento flexible (flex item) a lo largo del eje transversal (perpendicular al eje
principal), anulando el valor establecido por la propiedad align-items
del contenedor.
auto: Valor predeterminado. El elemento hereda la alineación definida por el contenedor mediantealign-items. Si el contenedor no tienealign-itemsdefinido, se comporta comostretch.flex-start: Alinea el elemento al inicio del eje transversal (parte superior en una fila o izquierda en una columna).flex-end: Alinea el elemento al final del eje transversal (parte inferior en una fila o derecha en una columna).center: Centra el elemento en el eje transversal.baseline: Alinea el elemento de acuerdo con la línea base del texto del resto de los elementos.stretch: (Valor por defecto si no se define ninguno y auto hereda este comportamiento). El elemento se estira para ocupar todo el espacio disponible en el eje transversal, siempre que no tenga una altura o ancho fijo en ese eje.
1
2
3
4
5
6
flex-direction: column;
1
2
3
4
5
6
<div>
<p><code class="language-css">align-self</code></p>
<div class="ej-normal-contenedor-items ej-flex">
<div class="ej-flex-elemento-align-self">1</div>
<div class="ej-flex-elemento-align-self">2</div>
<div class="ej-flex-elemento-align-self">3</div>
<div class="ej-flex-elemento-align-self">4</div>
<div class="ej-flex-elemento-align-self">5</div>
<div class="ej-flex-elemento-align-self">6</div>
</div>
<!-- flex-direction: column; -->
<div class="mt-5">
<p class="text-center"><code class="language-css">flex-direction: column;</code><br>
</p>
</div>
<div class="ej-normal-contenedor-items ej-flex ej-altura ej-flex-column">
<div class="ej-flex-elemento-align-self">1</div>
<div class="ej-flex-elemento-align-self">2</div>
<div class="ej-flex-elemento-align-self">3</div>
<div class="ej-flex-elemento-align-self">4</div>
<div class="ej-flex-elemento-align-self">5</div>
<div class="ej-flex-elemento-align-self">6</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-flex {
display: flex;
}
.ej-flex-column {
flex-direction: column;
}
.ej-altura {
height: 320px;
}
/* align-self */
.ej-normal-contenedor-items {
padding: 20px;
border: 3px solid green;
background-color: green;
height: 200px;
}
.ej-flex-elemento-align-self {
border: 3px solid red;
width: 100px;
background-color: white;
color: black;
}
.ej-flex-elemento-align-self:nth-child(1) {
align-self: auto;
}
.ej-flex-elemento-align-self:nth-child(2) {
align-self: flex-start;
}
.ej-flex-elemento-align-self:nth-child(3) {
align-self: flex-end;
}
.ej-flex-elemento-align-self:nth-child(4) {
align-self: center;
}
.ej-flex-elemento-align-self:nth-child(5) {
align-self: baseline;
}
.ej-flex-elemento-align-self:nth-child(6) {
align-self: stretch;
}
align-self otorga a cada elemento flexible control individual sobre
su alineación vertical (o transversal), sin afectar la alineación de los demás elementos dentro del
contenedor.
column-gap: <espacio>;
La propiedad column-gap: <espacio>; en Flexbox define el
espacio horizontal entre los elementos flexibles (flex items) cuando se organizan en columnas o filas
dentro de un contenedor flexible. Debe estar flex-wrap está
activado).
Donde <espacio> puede expresarse en unidades como px, em, rem, %, etc.
row-gap: <espacio>;
La propiedad row-gap: <espacio>; en Flexbox se utiliza para
definir el espacio vertical entre las filas de los elementos flexibles cuando el contenedor tiene
varias
líneas (es decir, cuando flex-wrap está activado).
Donde <espacio> puede expresarse en unidades como px, em, rem, %, etc.
gap: <espacio-filas> <espacio-columnas>;
En Flexbox, la propiedad gap define el espacio entre los elementos
flexibles (los flex items) dentro de un contenedor.
No afecta los márgenes exteriores del contenedor, solo el espaciado interno entre los hijos directos.
<espacio-filas>: define el espacio vertical entre filas (cuando los elementos se distribuyen en varias líneas).<espacio-columnas>: define el espacio horizontal entre columnas.- Si se especifica un solo valor, se aplica el mismo espacio tanto a filas como a columnas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<div class="ej-normal-contenedor-gap ej-flex ej-wrap ej-gap">
<div class="ej-flex-elemento-gap">1</div>
<div class="ej-flex-elemento-gap">2</div>
<div class="ej-flex-elemento-gap">3</div>
<div class="ej-flex-elemento-gap">4</div>
<div class="ej-flex-elemento-gap">5</div>
<div class="ej-flex-elemento-gap">6</div>
<div class="ej-flex-elemento-gap">7</div>
<div class="ej-flex-elemento-gap">8</div>
<div class="ej-flex-elemento-gap">9</div>
<div class="ej-flex-elemento-gap">10</div>
<div class="ej-flex-elemento-gap">11</div>
<div class="ej-flex-elemento-gap">12</div>
<div class="ej-flex-elemento-gap">13</div>
<div class="ej-flex-elemento-gap">14</div>
<div class="ej-flex-elemento-gap">15</div>
<div class="ej-flex-elemento-gap">16</div>
<div class="ej-flex-elemento-gap">17</div>
<div class="ej-flex-elemento-gap">18</div>
<div class="ej-flex-elemento-gap">19</div>
<div class="ej-flex-elemento-gap">20</div>
</div>
</div>
/* Todos los ejemplos*/
.ej-flex {
display: flex;
}
/* gap */
.ej-normal-contenedor-gap {
padding: 20px;
height: 300px;
border: 3px solid green;
background-color: green;
}
.ej-flex-elemento-gap {
border: 3px solid red;
width: 100px;
height: 30px;
background-color: white;
color: black;
}
.ej-wrap {
flex-wrap: wrap;
}
.ej-gap {
gap: 50px 20px;
}
Ejemplos Prácticos
Centrado Perfecto (Vertical y Horizontal)
El clásico problema resuelto en 3 líneas. Funciona para cualquier contenido sin importar su tamaño.
Centrado Perfecto
Solo con Flexbox
<div clas<div class="container">
<div class="box">
<p class="centrado">Centrado Perfecto</p>
<p>Solo con Flexbox</p>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
color: black;
font-size: 48px;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.centrado {
font-size: 48px;
}
- Estructura HTML: Esta estructura tiene dos niveles principales:
.container: el contenedor principal que usará Flexbox..box: el elemento interno que se centrará dentro del contenedor.
- CSS: contenedor principal (
.container):.container { display: flex; justify-content: center; align-items: center; min-height: 300px; }display: flex;: Convierte el contenedor en un contenedor flexible. Esto activa el modelo Flexbox para los elementos hijos (en este caso,.box).justify-content: center;: Centra los elementos horizontalmente dentro del contenedor.align-items: center;: Centra los elementos verticalmente dentro del contenedor.min-height: 300px;: Asegura que el contenedor tenga al menos 300 px de alto, permitiendo apreciar el centrado vertical.
- CSS: elemento interno (
.box):display: flex;Aplica nuevamente Flexbox, pero ahora dentro de.box, para organizar su contenido interno (<p>).flex-direction: column;Indica que los hijos se organizarán en columna (de arriba hacia abajo).align-items: center;Centra horizontalmente los elementos dentro de la caja.
Espaciado Automático entre Elementos
gap es la manera moderna de espaciar items sin trucos de :not(:last-child) o márgenes negativos.
Tarjeta 1
Espaciado automático con gap
Tarjeta 2
Sin usar márgenes complicados
Tarjeta 3
Solo una línea de CSS
<div class="cards">
<div class="card">
<p class="p2">Tarjeta 1</p>
<p>Espaciado automático con gap</p>
</div>
<div class="card">
<p class="p2">Tarjeta 2</p>
<p>Sin usar márgenes complicados</p>
</div>
<div class="card">
<p class="p2">Tarjeta 3</p>
<p>Solo una línea de CSS</p>
</div>
</div>
.cards {
display: flex;
gap: 2rem;
}
.card {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex: 1;
}
.p2 {
color: #333;
font-weight:bold;
margin-bottom: 1rem;
font-size: 1.5rem;
color: black;
}
.card p {
color: #666;
}
- Contenedor principal:
.cards:-
display: flex;convierte el elemento.cardsen un contenedor flexible. Esto significa que todos los elementos hijos directos (las tres.card) se transforman en ítems flexibles que se colocan en una sola fila por defecto. gap: 2remdefine un espacio uniforme entre las tarjetas.
En lugar de usar márgenes (
margin-rightomargin-left), elgapcrea separación automática y limpia entre los ítems flex. -
- Elementos hijos:
.card- Cada
.cardes un ítem flex, porque está dentro de.cards(el contenedor flex). flex: 1es la propiedad clave aquí. Significa que todas las tarjetas ocuparán el mismo ancho disponible dentro del contenedor. En otras palabras, el espacio total se reparte equitativamente entre las tarjetas.
- Cada
Columnas de Igual Altura
Todas las tarjetas tendrán la misma altura automáticamente, sin JavaScript ni tablas.
Columnas de Igual Altura
Rápido
Optimizado para velocidad. Carga instantánea y rendimiento excepcional en todos los dispositivos.
Diseño Moderno
Interfaz elegante y contemporánea. Diseñado con las últimas tendencias en UX/UI para una experiencia visual impactante. Cada detalle cuenta para crear una experiencia memorable.
Seguro
Protección avanzada de datos. Tu información siempre está segura con encriptación de última generación.
<div>
<p class="p1 text-center">Columnas de Igual Altura</p>
<div class="container-igual-altura">
<div class="card-igual-altura">
<p class="p2 card-igual-altura-title">Rápido</>
<p class="card-igual-altura-content">
Optimizado para velocidad. Carga instantánea y rendimiento excepcional en todos los
dispositivos.
</p>
<button class="card-igual-altura-button">Más Info</button>
</div>
<div class="card-igual-altura">
<p class="p2 card-igual-altura-title">Diseño Moderno</>
<p class="card-igual-altura-content">
Interfaz elegante y contemporánea. Diseñado con las últimas tendencias en UX/UI para una
experiencia visual impactante. Cada detalle cuenta para crear una experiencia memorable.
</p>
<button class="card-igual-altura-button">Más Info</button>
</div>
<div class="card-igual-altura">
<p class="p2 card-igual-altura-title">Seguro</>
<p class="card-igual-altura-content">
Protección avanzada de datos. Tu información siempre está segura con encriptación de última
generación.
</p>
<button class="card-igual-altura-button">Más Info</button>
</div>
</div>
</div>
.p1 {
color: #333;
font-weight: bold;
margin-bottom: 1rem;
font-size: 2.5rem;
color: white;
}
.container-igual-altura {
display: flex;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.card-igual-altura {
display: flex;
flex-direction: column;
flex: 1;
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.card-igual-altura:hover {
transform: translateY(-10px);
}
.card-igual-altura-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.card-igual-altura-title {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
}
.card-igual-altura-content {
color: #666;
line-height: 1.6;
flex-grow: 1;
margin-bottom: 1.5rem;
}
.card-igual-altura-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
transition: opacity 0.3s ease;
margin-top: auto;
}
.card-igual-altura-button:hover {
opacity: 0.9;
}
@media (max-width: 768px) {
.container-igual-altura {
flex-direction: column;
}
}
- Contenedor principal:
.container-igual-altura:display: flex;: Convierte al elemento contenedor en un contenedor flexible. Esto hace que todos sus hijos directos (las tarjetas.card-igual-altura) se conviertan en ítems flexibles.- Eje principal (
main axis): Por defecto, el eje principal en Flexbox es horizontal, por lo tanto las tarjetas se colocan una al lado de la otra en una fila. gap: 2rem;: Define el espacio uniforme entre las tarjetas sin necesidad de márgenes manuales.max-width: 1200px;ymargin: 0 auto;: Centran el grupo de tarjetas horizontalmente en la página y limitan su ancho máximo
- Elementos flexibles:
.card-igual-altura:flex: 1;: Le dice a cada tarjeta que ocupe la misma proporción del espacio disponible. Esto garantiza que todas las columnas tengan el mismo ancho, sin importar el contenido interno.display: flex;yflex-direction: column;: Cada tarjeta también se convierte en un contenedor flexible interno, pero ahora con dirección vertical (columna). Esto permite distribuir el contenido (título, texto, botón) de forma controlada dentro de cada tarjeta.- Altura igualada automáticamente: Como el contenedor principal (
.container-igual-altura") usa Flexbox y todos los hijos tienenflex: 1, el navegador hace que todas las tarjetas tengan la misma altura, aunque el texto dentro de cada una sea de diferente longitud.
- Distribución interna del contenido:
flex-grow: 1en.card-igual-altura-contentpermite que el texto ocupe el espacio disponible dentro de la tarjeta, empujando el botón al fondo de la tarjeta.margin-top: autoen el botón lo empuja hacia el final de la tarjeta, asegurando que todos los botones queden alineados en la misma línea inferior, incluso si los párrafos tienen alturas distintas.
Barra Lateral con Ancho Fijo y con contenido Flexible
La barra lateral siempre mide 250px y el contenido se adapta al espacio disponible.
<body>
<div class="container">
<aside class="sidebar">
<h2>Menú</h2>
<nav>
<ul>
<li><a href="#inicio">🏠 Inicio</a></li>
<li><a href="#servicios">💼 Servicios</a></li>
<li><a href="#proyectos">📁 Proyectos</a></li>
<li><a href="#equipo">👥 Equipo</a></li>
<li><a href="#contacto">📧 Contacto</a></li>
</ul>
</nav>
</aside>
<main class="content">
<h1>Contenido Principal</h1>
<div class="card">
<h3>Bienvenido</h3>
<p>Este es un ejemplo de layout con sidebar de ancho fijo y contenido flexible usando Flexbox. El
sidebar mantiene sus 250px de ancho mientras que el contenido se expande para ocupar el resto del
espacio disponible.</p>
</div>
<div class="card">
<h3>Características</h3>
<p>✓ Sidebar con ancho fijo de 250px<br>
✓ Contenido flexible que se adapta al espacio restante<br>
✓ Diseño responsivo y moderno<br>
✓ Scroll independiente en cada sección</p>
</div>
<div class="card">
<h3>Flexbox</h3>
<p>El contenedor principal usa <code>display: flex</code> para crear el layout. El sidebar tiene
<code>width: 250px</code> y <code>flex-shrink: 0</code> para mantener su ancho fijo, mientras que el
contenido usa <code>flex: 1</code> para ocupar todo el espacio restante.</p>
</div>
</main>
</div>
</body>
.body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
flex-shrink: 0;
overflow-y: auto;
}
.sidebar h2 {
margin-bottom: 30px;
font-size: 24px;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 10px;
}
.sidebar nav ul {
list-style: none;
}
.sidebar nav li {
margin-bottom: 15px;
}
.sidebar nav a {
color: white;
text-decoration: none;
display: block;
padding: 12px 15px;
border-radius: 8px;
transition: all 0.3s ease;
}
.sidebar nav a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
.content {
flex: 1;
background: #f5f7fa;
padding: 40px;
overflow-y: auto;
}
.card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.card h3 {
color: #667eea;
margin-bottom: 10px;
}
.card p {
color: #4a5568;
line-height: 1.6;
}
- El contenedor principal:
.container { display: flex; height: 100vh; }- La clase
.containeractúa como contenedor flexible. - La propiedad
display: flex convierte a .container en un flex container, lo que permite alinear y distribuir los elementos hijos (en este caso, el<aside>y el<main>) de manera flexible. - Por defecto, Flexbox coloca los elementos hijos uno al lado del otro en fila horizontal (dirección row).
- La clase
- El sidebar (barra lateral):
.sidebar { width: 250px; flex-shrink: 0; overflow-y: auto; }width: 250pxestablece un ancho fijo para la barra lateral.flex-shrink: 0impide que el sidebar se reduzca si la ventana se hace más pequeña. Es decir, aunque el espacio total disminuya, el sidebar conservará sus 250 px de ancho.
Así, el sidebar siempre mantiene su tamaño y no se deforma al redimensionar la pantalla.
- El contenido principal:
.content { flex: 1; overflow-y: auto; }flex: 1indica que este elemento ocupará todo el espacio restante que no usa el sidebar.- Flexbox calcula automáticamente cuánto espacio queda disponible en el eje principal
(horizontal)
y se lo asigna a
.content. - Si la ventana cambia de tamaño,
.contentse ajusta de forma automática sin afectar al sidebar.
- Resultado general del layout:
- El contenedor (
.container) usa Flexbox para colocar el sidebar y el contenido uno al lado del otro. - El sidebar tiene un ancho fijo y no se reduce.
- El contenido se expande o contrae según el tamaño disponible, manteniendo un diseño fluido y adaptable.
- Cada sección (sidebar y content) tiene su propio scroll independiente, gracias a
overflow-y: auto.
- El contenedor (