PROYECTO CSS: FLEXBOX

Propiedades para el elemento padre

Estas son algunas de las propiedades principales de flexbox para el elementos padre:

• Orden: Esto define un contenedor flexible; en línea o bloque dependiendo del valor dado. Permite un contexto flexible para todos sus hijos directos. Tenga en cuenta que las columnas CSS no tienen ningún efecto en un contenedor flexible.
• Flex-direction: Esto establece el eje principal, definiendo así la dirección en que se colocan los elementos flexibles en el contenedor flexible. Flexbox es (aparte del envoltorio opcional) un concepto de diseño de dirección única. Piense en elementos flexibles como diseños principales en hileras horizontales o columnas verticales.
  • row(predeterminado): de izquierda a derecha en ltr de derecha a izquierda en rtl
  • row-reverse: de derecha a izquierda en ltr; de izquierda a derecha en rtl
  • column: lo mismo que de row arriba a abajo
  • column-reserve: igual que row-reverse pero de abajo hacia arriba
• flex-flow (Se aplica a: elemento principal del contenedor flexible): Esta es una taquigrafía flex-directiony flex-wrappropiedades, que juntas definen los ejes principal y transversal del contenedor flexible. Por defecto es row nowrap.
• justify-content: Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre que sobra cuando todos los elementos flexibles de una línea son inflexibles o flexibles, pero han alcanzado su tamaño máximo. También ejerce algún control sobre la alineación de los elementos cuando se desbordan la línea.
  • flex-start (predeterminado): los artículos se empaquetan hacia la línea de inicio
  • flex-end: los artículos se embalan hacia la línea final
  • center: los artículos se centran a lo largo de la línea
  • space-between: los artículos se distribuyen uniformemente en la línea; el primer artículo está en la línea de inicio, último artículo en la línea final
  • space-around: los artículos se distribuyen uniformemente en la línea con el mismo espacio alrededor de ellos. Tenga en cuenta que visualmente los espacios no son iguales, ya que todos los elementos tienen el mismo espacio en ambos lados. El primer elemento tendrá una unidad de espacio contra el borde del contenedor, pero dos unidades de espacio entre el elemento siguiente porque el siguiente elemento tiene su propio espacio que se aplica.
  • space-evenly: los elementos se distribuyen de manera que el espaciado entre dos elementos (y el espacio hasta los bordes) sea igual.
• Align-items: Esto define el comportamiento predeterminado de cómo se colocan los elementos flexibles a lo largo del eje transversal en la línea actual. Piénselo como la justify-contentversión para el eje transversal (perpendicular al eje principal).
  • flex-start: el borde del margen de inicio cruzado de los artículos se coloca en la línea de inicio cruzado
  • flex-end: el margen de margen cruzado de los artículos se coloca en la línea cruzada
  • center: los elementos se centran en el eje transversal
  • baseline: los elementos están alineados, como alinear sus líneas de base
  • stretch (predeterminado): estirar para llenar el contenedor (respetar aún el ancho mínimo / ancho míximo)
• Align-content: Esto alinea las líneas de un contenedor flexible dentro cuando hay espacio adicional en el eje transversal, similar a cómo justify-content alinea los elementos individuales dentro del eje principal. Esta propiedad no tiene efecto cuando solo hay una línea de elementos flexibles.
  • flex-start: líneas empacadas al inicio del contenedor
  • flex-end: líneas empacadas al final del contenedor
  • center: líneas empacadas en el centro del contenedor
  • space-between: líneas distribuidas uniformemente; la primera línea está al comienzo del contenedor mientras que la última está al final
  • space-around: líneas distribuidas uniformemente con el mismo espacio alrededor de cada línea
  • stretch (predeterminado): las líneas se estiran para ocupar el espacio restante

Ejemplos

Flex-wrap

Justify-content

Propiedades para el elemento hijo

Estas son algunas de las propiedades principales de flexbox para el elementos hijo:

• Orden: Por defecto, los elementos flexibles se presentan en el orden de origen. Sin embargo, la orderpropiedad controla el orden en que aparecen en el contenedor flexible.
• Flex-grow: Esto define la capacidad de un elemento flexible para crecer si es necesario. Acepta un valor sin unidades que sirve como una proporción. Indica qué cantidad de espacio disponible dentro del contenedor flexible debe ocupar el artículo. Si todos los elementos se han flex-grow establecido en 1, el espacio restante en el contenedor se distribuirá por igual a todos los niños. Si uno de los niños tiene un valor de 2, el espacio restante ocuparía el doble de espacio que los demás (o lo intentará, al menos).
• Flex-shrink: Esto define la capacidad de un objeto flexible para contraerse si es necesario. Los números negativos no son válidos
• Flex-basis: Esto define el tamaño predeterminado de un elemento antes de que se distribuya el espacio restante. Puede ser una longitud (por ejemplo, 20%, 5rem, etc.) o una palabra clave. La auto palabra clave significa "ver mi propiedad de ancho o alto" (que fue temporalmente hecha por la main-size palabra clave hasta que se desaprovechó). La content palabra significa "tamaño se basa en el contenido del elemento" - esta palabra clave no está bien apoyado, sin embargo, por lo que es difícil de probar y más difícil saber lo que sus hermanos max-content, min-content y fit-content lo hacen. Si se establece en 0, el espacio adicional alrededor del contenido no se toma en cuenta. Si se establece en auto, el espacio adicional se distribuye en función de su flex-grow valor.
• Flex: Esta es la forma abreviada flex-grow, flex-shrinky flex-basiscombinada. El segundo y tercer parámetro ( flex-shrinky flex-basis) son opcionales. Por defecto es 0 1 auto. Se recomienda que use esta propiedad abreviada en lugar de establecer las propiedades individuales. La mano corta establece los otros valores inteligentemente.
• Align-self: Esto permite que la alineación predeterminada (o la especificada por align-items) se anule para elementos Flex individuales. enga en cuenta que float, clear y vertical-align no tienen ningún efecto sobre un elemento flexible.

Ejemplos

Flex-grow

Align-self

Códigos