FLEXBOX
Antes del módulo Flexbox Layout, había cuatro modos de diseño
- Bloque, para secciones en una página web
- En línea, para texto
- Tabla, para datos de tablas bidimensionales
- Posicionado, para la posición explícita de un elemento
Compatibilidad con navegador
Las propiedades de flexbox son compatibles con todos los navegadores modernos.
Ejemplo
Un contenedor flexible con tres elementos flexibles:
<div > class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Resultado
1
4
3
Conceptos
- Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre.
- Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, el eje principal del contenedor flex es en horizontal (en fila).
- Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical (y viceversa).
- Ítem: Cada uno de los hijos que tendrá el contenedor en su interior.