Aprende CSS Flexbox
Diseño Flexbox: display, direction, justify-content, align-items. Editor Monaco con vista previa HTML+CSS en vivo y verificación—aprende practicando.
- Paso 1
CSS Flexbox 1: introducción
Flexbox is a powerful way to lay out elements. Use `display: flex;` on the container to activate it....
Comenzar lección - Paso 2
CSS Flexbox 2: flex-direction row
`flex-direction: row;` (default) places items in a horizontal row, left to right....
Comenzar lección - Paso 3
CSS Flexbox 3: flex-direction column
`flex-direction: column;` places items in a vertical column, top to bottom....
Comenzar lección - Paso 4
CSS Flexbox 4: justify-content center
`justify-content: center;` centers the items along the main axis....
Comenzar lección - Paso 5
CSS Flexbox 5: justify-content space-between
`justify-content: space-between;` distributes space between items....
Comenzar lección - Paso 6
CSS Flexbox 6: align-items center
`align-items: center;` centers items on the cross axis. Perfect for vertical centering....
Comenzar lección - Paso 7
CSS Flexbox 7: flex-wrap
`flex-wrap: wrap;` allows items to wrap to the next line when there's not enough space....
Comenzar lección - Paso 8
CSS Flexbox 8: gap
`gap` adds space between flex items without using margin on each item....
Comenzar lección