El flujo normal es el como se comportan los elementos de HTML por defecto, es decir, como elementos en bloque, este comportamiento se puede alterar con el valor inline y sus variantes.
block: puede tener ancho, alto, padding, margin y básicamente lo que hace es ocupar todo su ancho disponible.
display: inline-flex; En este caso, flex es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-grid y también con grid y flex (que en realidad son block-grid y block-flex).
*inline funciona como si fuesen palabras, no ocupan todo el ancho y se van pegando unos elementos al lado de otros. Los elemento inline no pueden tener un ancho, alto, etc…
El contexto de bloque son basicamente mini estructuras dentro de nuestra estructura general, nuestro html layout. Se caracteriza por contener elementos flotantes.
.
Un ejemplo de creación de BFC es cuando usamos position;absolute y/o position fixed. Estas propiedades y valores sacan el contenedor del flujo normal del documento.
.
Flexbox y CSS Grid también crean un BFC, pero no se llaman igual. Se llaman Contexto de Formato Flexible y Contexto de Formato de Cuadricula, respectivamente.
Las posiciones nos permiten ubicar los bloques unos al lado de otros, encima, debajo u arriba.
.
Cuando estamos creando y diseñando para la web debemos tener en cuenta 3 ejes:
El contexto de apilamiento es como una “pila” que se va sobreponiendo o anteponiendo a los demás elementos HTML. Aquí algunas formas en las cuales podemos manejar el contexto de apilamiento:
¿Diferencias?
¿Similitudes?
justify (inline axis) align (block axis).¿Cuando usar cada uno?
.
Flexbox es más recomendado para componentes pequeños, de una escala pequeña en todo el layout de nuestro sitio.
.
CSS Grid está diseñado para elementos de mayor escala. Como la estructura de todo un sitio web.
.
Sí se puede y es muy recomendable usarlos juntos.
Un Design System es un conjunto de componentes reutilizables guiados por unos estándares. Puede ser creado por diseñadores (principalmente), desarrolladores, product managers, etc…
.
Un Design System es, entonces:
Ponernos las gafas de desarrollador es trabajar primero la estructura principal de un diseño y luego en los detalles.
.
Principios de diseño:
Algunas tendencias de diseño:
@support podemos escribir una mini prueba de CSS para saber si un navegador es compatible con lo que queremos usar. Funcionaría algo así: @support (display: grid) {}. Si es compatible con display grid lo usa, si no lo es, no lo usa.
