Scribd
Cargar
10 vistas2 páginas

Flexbox

El documento explica las propiedades de Flexbox, incluyendo el eje principal y cruzado, así como la alineación y distribución de elementos. Se detallan propiedades como justify-content, align-items, flex-wrap, flex-grow, y flex-basis, que permiten controlar el diseño y comportamiento de los elementos en un contenedor flex. También se menciona la forma abreviada de usar estas propiedades para simplificar el código.

Cargado por

eduardo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
10 vistas2 páginas

Flexbox

El documento explica las propiedades de Flexbox, incluyendo el eje principal y cruzado, así como la alineación y distribución de elementos. Se detallan propiedades como justify-content, align-items, flex-wrap, flex-grow, y flex-basis, que permiten controlar el diseño y comportamiento de los elementos en un contenedor flex. También se menciona la forma abreviada de usar estas propiedades para simplificar el código.

Cargado por

eduardo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

- En flexbox, el eje horizontal sería el “eje principal” y el eje

vertical el “eje cruzado” a no ser que se cambie a columnas,


donde el eje principal pasa a ser el vertical
- Gap: Espacio entre los elementos (se pone en rem)
- Flex-direction:
- Justify-content: Para alinear los elementos en el eje principal
que haya (dependiendo de si está en row o columna). Se puede
usar en el padre y en los hijos para alinear su contenido.
o Flex-start: es el que sale por defecto sin aplicar el
justify-content. Lo pone sin márgenes a la derecha.
o Flex-end: lo mismo pero lo pone a la derecha
o Center
o Space-between: espacia los elementos
proporcionalmente en todo el espacio que tengan
o Space-around: igual que el between solo que también
da algo de espacio a los márgenes laterales, además de
entre los elementos.
o Space-evenly: igual solo que el espacio entre los
elementos es igual que el espacio entre el lateral y el
elemento
- Align-item: Lo mismo, pero para el eje cruzado. Por defecto,
cada elemento va a ocupar todo el vertical.
o Baseline: ocupará solo el espacio que necesite
- Align-self: Lo mismo, pero sirve para los hijos. Se usa para
cambiar únicamente un elemento y se sobrescribe encima de
align-items
- Margin: Para los hijos, no existe justify-self, por lo que hay que
usar margin
- Order: cambiar la posición de un elemento. Por ejemplo: order:
3;. Si no hay otro order en los elementos y pones order 2, el
elemento se convertirá en el último ya que es el valor más alto
- Flex-wrap: Si se desbordan los hijos del contenedor, se saltará
a otra línea
o Wrap: se salta de línea. De esta manera, conseguimos
diseños responsive
o No-wrap: no salta de línea
- Flex-grow: Para que crezcan los hijos. Si ponemos flex-grow: 1;
todos los elementos ocuparán el máximo espacio. Si
especificamos en un solo hijo flex-grow:2; este crecerá el doble
de su tamaño
- Flex-shrink: Lo mismo pero para empequeñecer (no vas a usarlo
nunca)
- Flex-basis: 1; Es lo mismo que width, pero va a hacer que como
mínimo el ancho sea del contenido y no menos, a diferencia de
width que se puede encoger hasta desbordar. Si le pones un
tamaño como flex-basis: 30rem; va a tomar como máximo
30rem y se puede encoger con la página hasta el mínimo que le
marque el contenido

Lo más normal es que estos tres los veas abreviados en este:

- Flex: 1 1 30rem; (1. Grow, 2. Shrink, 3. Basis)

Lo más común es que únicamente se use esto:

- Flex: 1;

Ya que se consigue el mismo resultado

También podría gustarte