- Teoría
- Teoría
Márgenes entre elementos flex
Ya pusimos en cero los márgenes y rellenos de la lista y definimos el ancho y el relleno de las tarjetas. Ahora hay que colocarlas en una fila y separarlas. La forma más sencilla de crear esa fila es usar flexbox, porque los elementos flex se colocan así de manera predeterminada.
El carrusel debe tener una sola fila de tarjetas, así que no necesitamos permitir el salto a otra línea.
Como la separación entre tarjetas debe ser fija, usaremos margin. Haremos lo mismo que en la parte anterior: primero agregaremos un margen derecho a todas las tarjetas y después lo quitaremos de la última con una pseudoclase. Como solo se verán tres tarjetas a la vez, la última siempre será la tercera.
En la parte anterior usamos :nth-child para seleccionar cada tercer elemento. Ahora solo queremos quitar el margen de una tarjeta, la tercera, así que el selector será un poco distinto:
/* Selecciona el tercer hijo si tiene la clase item */
.item:nth-child(3) { ... }Convertiremos la lista cards-list en un contenedor flex y agregaremos un margen derecho a los elementos con la clase card. Después usaremos :nth-child para quitar el margen sobrante de la tercera tarjeta.
También puedes seleccionar el último elemento con la pseudoclase :last-child.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Convierte el elemento con la clase
cards-listen un contenedor flex. - Agrega un margen derecho de
10pxa las tarjetas con la clasecard. - Usa
:nth-child(3)para quitar el margen derecho de la tercera tarjeta.