Flexbox

Lección 09 de 37 · 4 min

Flexbox acomoda elementos en una fila o en una columna, reparte el espacio que sobra y los alinea sin márgenes calculados a mano.

Alineación

justify-content reparte el espacio libre sobre el eje principal, y align-items ubica los elementos en el eje transversal. Como siguen a los ejes, con column se intercambian: justify-content pasa a mover en vertical y align-items en horizontal.

Agruparflex-start · center · flex-endAgrupan los elementos al inicio, en el centro o al final del eje.
Repartirspace-betweenPega el primero y el último a los bordes y reparte el resto del espacio entre ellos.
Rodearspace-aroundLe da a cada elemento el mismo espacio a cada lado, así que en los bordes queda la mitad que entre dos elementos.
EstirarstretchEl valor por defecto de align-items: estira los elementos para llenar el eje transversal, siempre que no tengan un tamaño fijo en ese eje.

align-self cambia la alineación transversal de un solo elemento. En el eje principal no hay equivalente (flexbox ignora justify-self), pero un margen automático hace el trabajo: margin-left: auto absorbe el espacio libre y empuja ese elemento, y los que lo siguen, hasta el final de la fila.

barra.css

1.barra {
2  display: flex;
3  align-items: center;
4  gap: 8px;
5}
6
7.barra .salir {
8  margin-left: auto; /* va al final de la fila */
9}

Cómo crecen los elementos

Cada elemento flex tiene tres propiedades de tamaño, todas sobre el eje principal:

Baseflex-basisEl tamaño de partida. Por defecto auto, que toma su width o, si no tiene, su contenido.
Crecerflex-growQué parte del espacio sobrante se lleva. Por defecto 0: no crece.
Cederflex-shrinkCuánto cede cuando falta lugar. Por defecto 1: todos ceden.

El reparto es proporcional. En un contenedor de 400px sin gap, con dos elementos de flex-basis 100px, sobran 200px; si sus flex-grow son 1 y 3, el primero recibe 50px y el segundo 150px, y terminan midiendo 150px y 250px.

El atajo flex: 1 equivale a flex: 1 1 0%: el elemento parte de cero y crece. Por eso varios elementos con flex: 1 quedan del mismo ancho mientras su contenido entre. En la demo, el destino se queda con todo el espacio libre: las franjas vuelven a medir solo el gap y justify-content ya no tiene nada que repartir.

fila.css

1.fila {
2  display: flex;
3  flex-wrap: wrap; /* lo que no entra baja de línea */
4  gap: 16px;
5}
6
7.fila > * {
8  flex: 1 1 200px;
9  min-width: 0; /* deja que el texto se corte */
10}

Por defecto todo va en una sola línea (flex-wrap: nowrap); con wrap, los elementos que no entran pasan a la línea siguiente. Y un detalle que confunde: los elementos flex tienen min-width: auto, así que no se achican por debajo de su contenido más largo, como una URL. Para que un texto se corte con text-overflow: ellipsis, poné min-width: 0 en el elemento flex que lo contiene.

En Tailwind

En Tailwind, la clase flex es display: flex, no el atajo flex. Cada valor de alineación tiene su clase, y gap usa la misma escala de 4px que el relleno: gap-2 son 8px.

CSS	Tailwind
display: flex · inline-flex	flex · inline-flex
flex-direction: row · column	flex-row · flex-col
justify-content: space-between	justify-between (start, center, around)
align-items · align-self: center	items-center · self-center
gap: 8px · margin-left: auto	gap-2 · ml-auto
flex: 1 · flex-shrink: 0	flex-1 · shrink-0 · grow · basis-0
flex-wrap: wrap · min-width: 0	flex-wrap · min-w-0

contenedor.html

1<!-- barra: el logo a la izquierda, las acciones empujadas a la derecha -->
2<nav class="flex items-center gap-4">
3  <a href="/">Logo</a>
4  <a class="ml-auto" href="/ayuda">Ayuda</a>
5  <a href="/salir">Salir</a>
6</nav>
7
8<!-- columna en el teléfono, fila desde 48rem -->
9<div class="flex flex-col gap-4 md:flex-row">
10  <aside class="md:w-48 md:shrink-0">…</aside>
11  <main class="min-w-0 md:flex-1">…</main>
12</div>

Flexbox

Lesson 09 of 37 · 4 min

Flexbox lays elements out in a row or a column, shares out the space that's left and aligns them, with no hand-tuned margins.

Alignment

justify-content shares out the free space along the main axis, and align-items places the items on the cross axis. Since they follow the axes, they swap with column: justify-content now moves things vertically and align-items horizontally.

Packflex-start · center · flex-endPack the items at the start, the center or the end of the axis.
Spreadspace-betweenPuts the first and last items against the edges and shares the rest of the space between them.
Surroundspace-aroundGives each item the same space on each side, so the edges get half the space found between two items.
StretchstretchThe default for align-items: stretches the items to fill the cross axis, as long as they have no fixed size on that axis.

align-self changes the cross axis alignment of a single item. There's no equivalent on the main axis (flexbox ignores justify-self), but an auto margin does the job: margin-left: auto soaks up the free space and pushes that item, and the ones after it, to the end of the row.

bar.css

1.bar {
2  display: flex;
3  align-items: center;
4  gap: 8px;
5}
6
7.bar .sign-out {
8  margin-left: auto; /* goes to the end of the row */
9}

How items grow

Each flex item has three sizing properties, all on the main axis:

Basisflex-basisThe starting size. It defaults to auto, which takes its width or, if it has none, its content.
Growflex-growWhat share of the leftover space it takes. It defaults to 0: it doesn't grow.
Shrinkflex-shrinkHow much it gives up when room runs out. It defaults to 1: they all give up some.

The split is proportional. In a 400px container with no gap and two items with a flex-basis of 100px, 200px are left over; if their flex-grow values are 1 and 3, the first gets 50px and the second 150px, so they end up 150px and 250px wide.

The shorthand flex: 1 means flex: 1 1 0%: the item starts from zero and grows. That's why several items with flex: 1 end up the same width, as long as their content fits. In the demo, the destination takes all the free space: the bands shrink back to the gap and justify-content has nothing left to share out.

row.css

1.row {
2  display: flex;
3  flex-wrap: wrap; /* what doesn't fit moves to a new line */
4  gap: 16px;
5}
6
7.row > * {
8  flex: 1 1 200px;
9  min-width: 0; /* lets the text get cut off */
10}

By default everything stays on one line (flex-wrap: nowrap); with wrap, items that don't fit move to the next line. And one detail that trips people up: flex items have min-width: auto, so they won't shrink below their longest piece of content, such as a URL. To cut text off with text-overflow: ellipsis, set min-width: 0 on the flex item that holds it.

In Tailwind

In Tailwind, the flex class is display: flex, not the flex shorthand. Each alignment value has its own class, and gap uses the same 4px scale as padding: gap-2 is 8px.

CSS	Tailwind
display: flex · inline-flex	flex · inline-flex
flex-direction: row · column	flex-row · flex-col
justify-content: space-between	justify-between (start, center, around)
align-items · align-self: center	items-center · self-center
gap: 8px · margin-left: auto	gap-2 · ml-auto
flex: 1 · flex-shrink: 0	flex-1 · shrink-0 · grow · basis-0
flex-wrap: wrap · min-width: 0	flex-wrap · min-w-0

container.html

1<!-- bar: the logo on the left, the actions pushed to the right -->
2<nav class="flex items-center gap-4">
3  <a href="/">Logo</a>
4  <a class="ml-auto" href="/help">Help</a>
5  <a href="/sign-out">Sign out</a>
6</nav>
7
8<!-- a column on phones, a row from 48rem up -->
9<div class="flex flex-col gap-4 md:flex-row">
10  <aside class="md:w-48 md:shrink-0">…</aside>
11  <main class="min-w-0 md:flex-1">…</main>
12</div>

Flexbox

Ejes y dirección

Alineación

Cómo crecen los elementos

En Tailwind

Flexbox

Axes and direction

Alignment

How items grow

In Tailwind