Rows with Flexbox · Filas con Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Español
Colocar cajas en fila
- Por defecto, las cajas se apilan hacia abajo. A menudo quieres que estén una al lado de la otra.
- Flexbox es la forma sencilla de lograrlo.
- Coloca
display: flex;en el contenedor —la caja que contiene a las demás— y sus hijos se alinearán en una fila.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Español
Distribuir espacio entre ellas
- Una vez que una caja tiene
display: flex;, puedes controlar cómo se distribuyen sus hijos. justify-content: space-between;los separa, dejando espacios entre ellos.gap: 12px;añade un espacio uniforme entre cada hijo.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Español
Errores comunes
display: flexva aplicado al contenedor, no a los elementos hijos.justify-contentdistribuye los elementos a lo largo de la fila.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Español
Ahora te toca a ti
display: flexva aplicado al contenedor, no a los elementos hijos.- Convierte una caja en una fila, luego distribuye sus hijos.
Explore · Explorar
Flexbox lays out a row · Flexbox organiza una fila
justify-content spaces items along the row; align-items across it. · justify-content distribuye los elementos a lo largo de la fila; align-items en el sentido perpendicular.
Put the three boxes side by side. Add display: flex; to the .row rule. · Coloca las tres cajas una al lado de la otra. Añade display: flex; a la regla .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Distribuye las cajas uniformemente a lo largo de la fila. Añade justify-content: space-between; a la regla .row.