¡Buen dia amigos!



Aquí hay una guía completa de hojas de trucos visuales para todas las propiedades de los módulos Flexbox y Grid CSS.



Fuentes clave: una guía completa de Flexbox , una guía completa de Grid .



Al final del artículo, encontrará un pequeño tutorial sobre cómo crear un simulador Flexbox.



Sin más preámbulos.

Flexbox (Flex, en lo sucesivo denominado Flex)

Terminología

Flex no es una propiedad separada, sino un módulo completo que incluye un conjunto de propiedades. Algunas de estas propiedades se agregan al contenedor (el elemento padre, conocido como contenedor flexible), otras se agregan a los elementos secundarios (conocidos como elementos flexibles, en adelante - elementos)).



El diseño "regular" se basa en el flujo de bloques y elementos en línea, mientras que el diseño flexible se basa en direcciones de flujo flexible. Eche un vistazo a esta imagen de la especificación para mostrar las ideas clave detrás del diseño flexible.







Los elementos se colocan a lo largo del eje principal (desde el inicio principal al final principal) o a lo largo del eje transversal (desde el inicio transversal al final transversal).

• — , , . ; «flex-direction» (, . )
• main-start | main-end — main-start main-end
• (main size) — (main dimension),
• — , .
• cross-start | cross-end — , cross-end cross-start
• (cross size) —

-

display

Esta propiedad define un contenedor flexible; bloque o línea en función del valor asignado. Incluye el "contexto flexible" para todos los hijos directos del contenedor.

.container {
  display: flex; /*  inline-flex */
}

Tenga en cuenta que las propiedades de la columna CSS en el contenedor no funcionan.

dirección flexible

Esta propiedad define el eje principal, la dirección a lo largo de la cual se colocan los elementos en el contenedor. El propio Flex (sin que los envoltorios amplíen su funcionalidad) implementa el concepto de un diseño unidireccional. Por lo tanto, los elementos se colocan en líneas horizontales o en columnas verticales.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• fila (predeterminado): los elementos se distribuyen de izquierda a derecha en ltr o de derecha a izquierda en rtl
• row-reverse: orden inverso de las filas de los elementos: de derecha a izquierda en ltr o de izquierda a derecha en rtl
• columna: similar a la fila, pero de arriba a abajo
• columna inversa: similar a fila inversa, pero de abajo hacia arriba

flex-wrap (envoltura, transición, división)

De forma predeterminada, todos los elementos se colocan en una línea. Con esta propiedad, puede dejar que los elementos pasen a la siguiente línea según sea necesario.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (predeterminado): todos los elementos están en una línea
• envoltura: los elementos pueden abarcar varias líneas de arriba a abajo
• wrap-reverse: los elementos pueden abarcar varias líneas de abajo hacia arriba

flex-flow (flujo)

Esta propiedad es una abreviatura de flex-direction y flex-wrap, que definen los ejes principal y transversal del contenedor. El valor predeterminado es row nowrap.

.container {
  flex-flow: column wrap;
}

justificar el contenido (alinear el contenido en una línea)

Esta propiedad determina la alineación de elementos a lo largo del eje principal. Permite distribuir el espacio libre que dejan los elementos en desuso de tamaño fijo o elementos flexibles que han alcanzado su tamaño máximo. También le permite controlar la alineación de los elementos desbordados.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (predeterminado): los elementos se mueven al inicio del contenedor a lo largo del eje principal
• flex-end: los artículos se empujan al final del contenedor
• inicio: los elementos se mueven al principio del contenedor, determinado por el valor de la propiedad "modo de escritura"
• end: los elementos se desplazan al final del contenedor, determinado por el valor de la propiedad "modo de escritura"
• izquierda: los artículos se empujan hacia el borde izquierdo del contenedor; sin dirección flexible, el comportamiento es similar al inicio
• derecha: los artículos se aprietan hacia el borde derecho del recipiente; sin dirección flexible, el comportamiento es similar al inicio
• center:
• space-between: , , — ,
• space-around: . , ; , . , ,
• space-evenly: ,

Tenga en cuenta que la compatibilidad con las propiedades enumeradas difiere entre los navegadores. Los más seguros son flex-start, flex-end y center.



En cuanto a las palabras clave adicionales "seguro" e "inseguro", utilizar seguro permite evitar dibujar elementos fuera de la página, independientemente del posicionamiento, lo que a su vez elimina la posibilidad de desplazamiento.

alinear-elementos (alinear elementos)

Esta propiedad determina cómo se colocan los elementos a lo largo del eje transversal. Se puede comparar con el contenido de justificación para el eje transversal (perpendicular al eje principal).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• estirar (predeterminado): los elementos se estiran para llenar todo el contenedor (depende de su ancho mínimo / ancho máximo)
• inicio flexible / inicio / inicio automático: los elementos se desplazan al inicio del eje transversal. Las diferencias entre las propiedades anteriores no son significativas y dependen de la dirección flexible o del modo de escritura.
• flex-end / end / self-end: Los elementos se desplazan hasta el final del eje transversal. Las diferencias entre las propiedades anteriores no son significativas y dependen de la dirección flexible o del modo de escritura.
• centro: los elementos están centrados
• línea de base: los elementos están alineados a lo largo de su línea de base

Las palabras clave modificadoras "seguro" e "inseguro" se pueden usar como configuraciones adicionales para evitar la alineación de elementos que harían que el contenido fuera inaccesible (inaccesible, fuera de la página).

align-content (alinear contenido en varias líneas)

Esta propiedad determina la alineación de las líneas del contenedor cuando hay espacio libre a lo largo del eje transversal. Es similar a justify-content, que distribuye el espacio entre elementos individuales a lo largo del eje principal.



Tenga en cuenta que la propiedad en cuestión solo se aplica al contenido del contenedor que abarca varias líneas cuando la propiedad flex-wrap está configurada en wrap o wrap-reverse. Para una sola línea (cuando la propiedad "flex-wrap" tiene el valor predeterminado "no-wrap"), la aplicación de align-content no tendrá ningún efecto.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (predeterminado): las líneas están en posiciones normales
• flex-start / start: las líneas se mueven al principio del contenedor. el inicio flexible depende de la dirección flexible y el inicio depende del modo de escritura
• flex-end / end: las líneas se empujan hasta el final del contenedor. flex-end depende de flex-direction y end depende del modo de escritura
• centro: las líneas están centradas
• espacio entre: las líneas se colocan de modo que la primera línea esté al principio del contenedor, la última al final y las líneas restantes estén espaciadas uniformemente
• espacio alrededor: las líneas están espaciadas con el mismo espacio entre ellas
• espacio uniformemente: las líneas están espaciadas con el mismo espacio alrededor de cada una de ellas
• estiramiento: las líneas se estiran para llenar todo el espacio disponible

Las palabras clave modificadoras "seguro" e "inseguro" se pueden usar como configuraciones adicionales para evitar la alineación de elementos que harían que el contenido fuera inaccesible (inaccesible, fuera de la página).

Propiedades del elemento flexible

orden orden)

De forma predeterminada, los elementos se organizan en el contenedor en el orden en que aparecen en el marcado. Esta propiedad le permite controlar esto.

.item {
  order: 5; /*    0 */
}

flex-grow (crecimiento, expansión)

Esta propiedad determina la capacidad de un elemento para expandirse cuando sea necesario. Toma un valor entero que actúa como proporción. La proporción determina cuánto espacio disponible en el contenedor puede ocupar un artículo.



Si todos los elementos tienen un crecimiento flexible de 1, el espacio disponible se distribuye uniformemente entre ellos. Si uno de los elementos tiene un crecimiento flexible de 2, ese elemento ocupará el doble del espacio de los otros elementos (o al menos intentará hacerlo).

.item {
  flex-grow: 4; /*   0 */
}

Los valores negativos no son válidos.

flex-shrink (encoger, encoger)

Esta propiedad determina la capacidad de un elemento para comprimir cuando sea necesario.

.item {
  flex-shrink: 3; /*   1 */
}

Los valores negativos no son válidos.

base flexible

Esta propiedad define el tamaño predeterminado del elemento antes de asignar el espacio restante. Este tamaño puede ser una longitud (por ejemplo, 20%, 5rem, etc.) o una palabra clave. La palabra clave auto significa usar el valor de la propiedad "width" o "height" del elemento (anteriormente, se usaba main-size en lugar de auto). La palabra clave "contenido" significa tener en cuenta el contenido del elemento. Esta palabra clave aún no tiene soporte, por lo que es difícil diferenciar entre contenido mínimo, contenido máximo y contenido adecuado.

.item {
  flex-basis:  | auto; /*   auto */
}

Si el valor de esta propiedad es 0, no se tiene en cuenta el espacio que rodea al elemento. Si el valor es "auto", el espacio disponible se asigna de acuerdo con el valor de la propiedad "flex-grow".

flexionar

Esta propiedad es una abreviatura de flex-grow, flex-shrink y flex-base. El segundo y tercer parámetro (flex-shrink y flex-base) son opcionales. El valor predeterminado es 0 1 auto, y se puede omitir auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Se recomienda que utilice esta abreviatura en lugar de definir cada propiedad para que los valores de propiedad se determinen automáticamente en el orden correcto.

align-self (alineación de un solo elemento)

Esta propiedad le permite sobrescribir la alineación predeterminada o la alineación automática de un elemento individual.



Consulte la explicación de alinear elementos para conocer los valores disponibles.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Tenga en cuenta que flotar, borrar y alinear verticalmente no tienen ningún efecto en un elemento flexible.

Ejemplos de

Comencemos con un ejemplo muy simple: resolver el problema de alinear un elemento con el centro.

.parent {
  display: flex;
  height: 300px; /*     */
}

.child {
  width: 100px;  /*     */
  height: 100px; /*     */
  margin: auto;  /* ! */
}

Esto funciona gracias al hecho de que la propiedad "margin" establecida en "auto" consume todo el espacio disponible del contenedor flexible. Por lo tanto, establecer el valor de relleno vertical en automático da como resultado un centrado perfecto del elemento en ambos ejes.



Ahora intentemos usar más propiedades. Tenemos 6 elementos de tamaño fijo que pueden cambiar de tamaño dependiendo del ancho de la pantalla sin involucrar consultas de medios. Queremos que el espacio disponible del eje principal se distribuya uniformemente entre los elementos.

.flex-container {
  /*     - */
  display: flex;

  /*     ,
           
   *       :
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* ,  ,      */
  justify-content: space-around;
}

Hecho. Queda por estilizar un poco:







Intentemos algo más. Supongamos que tenemos un menú de navegación alineado a la derecha en el encabezado de nuestro sitio y queremos que esté centrado en pantallas medianas y alineado en una columna en pantallas pequeñas. Pan comido.

/*   */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /*          */
  justify-content: flex-end;
}

/*   */
@media (max-width: 800px) {
  .navigation {
    /*                 */
    justify-content: space-around;
  }
}

/*   */
@media (max-width: 500px) {
  .navigation {
    /*           ()   () */
    flex-direction: column;
  }
}

Experimentemos con la flexibilidad de los elementos. ¿Qué tal crear un diseño de tres columnas para dispositivos móviles con un encabezado y un pie de página de tamaño completo que no dependa del orden de los elementos en el marcado?

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/*   flex-basis       100% */
.wrapper > * {
  flex: 1 100%;
}

/*      
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/*   */
@media all and (min-width: 600px) {
  /*        */
  .aside { flex: 1 auto; }
}

/*   */
@media all and (min-width: 800px) {
  /*      main 
   *   main   2   ,  
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Recursos útiles

• Especificación
• MDN
• Hoja de referencia de Flexbox
• Flexbox Froggy

Apoyo

Grid (en lo sucesivo, Grid o Grid)

CSS Grid Layout es, con mucho, la herramienta de diseño de páginas más poderosa. Es un sistema bidireccional. Esto significa que puede funcionar tanto con cadenas como con columnas, a diferencia de Flex, que solo puede funcionar con cadenas. Grid incluye las propiedades de un elemento principal (Grid Container, en lo sucesivo denominado contenedor) y las propiedades de los elementos secundarios (Grid Elements, en lo sucesivo denominados elementos).

Terminología

Contenedor de rejilla (en lo sucesivo denominado contenedor)

Un elemento al que se le asigna una propiedad de "visualización" con un valor de "cuadrícula" se convierte en un contenedor de cuadrícula. Este contenedor es el antepasado directo de todos los elementos de la cuadrícula. En el siguiente ejemplo, un div con clase "contenedor" es un contenedor de cuadrícula.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Grid Line (en lo sucesivo, línea)

La línea divisoria que forma la estructura de la Grid. Puede ser vertical u horizontal y denota el borde de una fila o columna. La línea amarilla en la imagen de abajo es un ejemplo de una línea de cuadrícula vertical (línea de cuadrícula de columna).

Pista de cuadrícula (en lo sucesivo, pista o pista)

El espacio entre dos líneas adyacentes. Puede pensar en las pistas como filas o columnas de la cuadrícula. A continuación se muestra un ejemplo de una pista entre la segunda y la tercera línea.

Área de la cuadrícula (en lo sucesivo, el área)

El espacio total entre las cuatro líneas. Un área puede abarcar cualquier número de celdas de la cuadrícula. A continuación se muestra un ejemplo del área entre las líneas horizontales 1 y 3 y las líneas verticales 1 y 3.

Elemento de cuadrícula (en adelante, el elemento)

Hijo (descendiente directo) del contenedor. En el siguiente ejemplo, los elementos con la clase "elemento" son elementos de la cuadrícula, pero los elementos con la clase "subelemento" no lo son.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Celda de cuadrícula (en lo sucesivo, celda)

El espacio entre dos líneas horizontales y verticales adyacentes. Es la unidad básica de Grid. A continuación, se muestra un ejemplo de una celda entre las líneas horizontales 1 y 2 y las líneas verticales 2 y 3.

Ejemplo

Columnas de ancho flexible que cambian de tamaño automáticamente según el ancho de la pantalla sin consultas de medios.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*      min() */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /*    ,    */
  /* gap: 1rem */
}

Propiedades del contenedor de cuadrícula

monitor

Esta propiedad convierte al elemento en un contenedor de cuadrícula y establece el contexto de cuadrícula para su contenido.

.container {
  display: grid | inline-grid;
}

• cuadrícula - cuadrícula de bloque
• cuadrícula en línea - cuadrícula en línea

Tenga en cuenta que la capacidad de crear cuadrículas anidadas se ha trasladado a la especificación CSS Grid Level 2 .

columnas-plantilla-cuadrícula, filas-plantilla-cuadrícula

Estas propiedades definen las columnas y filas de los valores de Cuadrícula separados por espacios. Los valores representan el tamaño de la pista y los espacios representan la línea.

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• <track-size> - longitud, porcentaje o fracciones del espacio libre de la cuadrícula (usando la unidad "fr")
• <line-name> - nombre arbitrario

Cuando deja un espacio en blanco entre los valores de la pista, a las líneas se les asignan automáticamente números positivos y negativos:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Puede especificar explícitamente nombres de línea. Observe los corchetes:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Las líneas pueden tener varios nombres. Aquí, por ejemplo, la segunda línea tiene dos nombres:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Si la definición contiene fragmentos repetidos, puede usar la declaración "repetir" para acortar:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Que es equivalente a lo siguiente:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Si varias líneas tienen el mismo nombre, puede utilizar el nombre de la línea y el número de dichas líneas.

.item {
  grid-column-start: col-start 2;
}

La unidad "fr" le permite establecer el tamaño de la pista como una fracción del espacio libre del contenedor. En el siguiente ejemplo, cada elemento tiene un tercio del ancho del contenedor:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

El espacio libre se calcula después de restar elementos de tamaño fijo. En el siguiente ejemplo, el espacio disponible para la asignación mediante la unidad "fr" no incluye 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

áreas de plantilla de cuadrícula

Esta propiedad define la plantilla de cuadrícula utilizando los nombres de área definidos en las propiedades del "área de cuadrícula". La repetición de nombres de áreas hace que el contenido se expanda en el número especificado de celdas. Un punto significa una celda vacía. Esta sintaxis le permite visualizar la estructura de la cuadrícula.

.container {
  grid-template-areas:
    " | . | none | ..."
    "...";
}

• <grid-area-name> - nombre del área
• ... - celda vacía
• ninguno - sin área

Ejemplo:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Este código crea una cuadrícula de cuatro columnas de ancho y tres líneas de alto. La primera línea (superior) está completamente ocupada por el encabezado. La fila del medio consta de dos áreas "principales", una celda vacía y un área de "barra lateral". La última línea es el sótano.







Cada línea de la definición debe tener el mismo número de columnas.



Se puede usar cualquier número de puntos para representar una celda vacía. Siempre que no haya espacio entre los puntos, son un indicador de una celda vacía.



Tenga en cuenta que esta sintaxis se utiliza para representar áreas, no líneas. Usando esta sintaxis, la línea a cada lado de la región se nombra automáticamente. Si el nombre de la región es "foo", entonces la primera (primera) línea (línea y columna) de la región será "foo-start" y la última - "foo-end". Esto significa que algunas líneas pueden tener varios nombres, como en el ejemplo anterior, donde la línea superior izquierda tiene tres nombres: header-start, main-start y footer-start.

plantilla de cuadrícula

Esta propiedad es una abreviatura de grid-template-rows, grid-template-columnas y grid-template-areas.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

• none: restablece los valores predeterminados de las tres propiedades
• <grid-template-rows> / <grid-template-columns>: establece las propiedades "grid-template-rows" y "grid-template-columnas" en los valores correspondientes, y la propiedad "grid-template-areas" en "ninguna"

Puede usar una sintaxis más compleja, pero al mismo tiempo más conveniente, para definir los valores de las tres propiedades:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Esto es equivalente a lo siguiente:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

Dado que la plantilla de cuadrícula no restablece las propiedades de cuadrícula implícitas (como las columnas automáticas de cuadrícula, las filas automáticas de cuadrícula y el flujo automático de cuadrícula), que son necesarias en la mayoría de los casos, se recomienda utilizar la propiedad "cuadrícula" en su lugar.

espacio entre columnas, espacio entre filas, cuadrícula-espacio entre columnas, cuadrícula-espacio entre filas

Estas propiedades determinan el tamaño de las líneas. En otras palabras, determinan la cantidad de sangría entre columnas / líneas.

.container {
  /*  */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /*  */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• <tamaño de línea> - cantidad de sangrías

Ejemplo:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 15px;
}

El relleno solo se crea entre columnas / filas, no a lo largo de los bordes de la cuadrícula.



Tenga en cuenta que las propiedades "grid-column-gap" y "grid-row-gap" ahora se han renombrado a "column-gap" y "row-gap".

brecha, brecha de red

Esta propiedad es una abreviatura de row-gap y column-gap.

.container {
  /*  */
  gap: <grid-row-gap> <grid-column-gap>;

  /*  */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• <grid-row-gap> <grid-column-gap> - tamaños de relleno

Ejemplo:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

Si no se establece el valor de la propiedad "row-gap", se establece en el valor de la propiedad "column-gap".



Tenga en cuenta que la propiedad "grid-gap" ahora se llama "gap".

justificar-elementos

Esta propiedad determina la alineación de los elementos en las celdas a lo largo del eje de línea (horizontal) (a diferencia de la propiedad "align-items", que determina la alineación a lo largo del eje del bloque (columna, vertical)). El valor de esta propiedad se aplica a todos los elementos del contenedor.

.container {
  justify-items: start | end | center | stretch;
}

• inicio: los elementos se desplazan al comienzo de sus celdas (borde izquierdo)
• fin: los elementos se desplazan al final de las celdas (borde derecho)
• centro: los elementos están centrados
• estiramiento: los elementos llenan todo el ancho de las celdas

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

La posición de un elemento individual a lo largo del eje de línea de la celda está controlada por la propiedad "justify-self".

alinear-elementos

Esta propiedad determina la alineación de los elementos en las celdas a lo largo del eje del cuadro (columna, vertical) (a diferencia de la propiedad "justify-items", que determina la alineación a lo largo del eje de la fila (horizontal)). El valor de esta propiedad se aplica a todos los elementos del contenedor.

.container {
  align-items: start | end | center | stretch;
}

• inicio: los elementos se desplazan al comienzo de sus celdas (borde superior)
• fin: los elementos se desplazan al final de las celdas (borde inferior)
• centro: los elementos están centrados
• estiramiento: los elementos llenan la altura completa de las celdas

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

La posición de un elemento individual a lo largo del eje de la columna de la celda está controlada por la propiedad "align-self".

elementos de lugar

Esta propiedad es una abreviatura de align-items y justify-items.

.container {
  place-items: <align-items> <justify-items>;
}

• <align-items> <justify-items> es el primer valor para alinear-elementos, el segundo para justificar-elementos. Si no hay un segundo valor, el primer valor se asigna a ambas propiedades.

Ejemplo:

.container {
  place-items: center start;
}

Los elementos se centran a lo largo del eje de la columna y en el origen a lo largo del eje de línea.

justificar-contenido (alineación de columnas)

A veces, el ancho total de los elementos de Grid (sus columnas) es menor que el ancho del contenedor. Esto puede suceder al definir elementos de tamaño fijo (usando px, por ejemplo). En este caso, podemos definir el orden de las columnas Grid en el contenedor. Esta propiedad determina la alineación de la cuadrícula a lo largo del eje de la línea, la alineación de las columnas (a diferencia de la propiedad "align-content", que determina la alineación de la cuadrícula a lo largo del eje del cuadro (columna), la alineación de las filas).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• inicio: desplaza la cuadrícula al principio del contenedor (borde izquierdo)
• end: mueve la cuadrícula al final del contenedor (borde derecho)
• centro: la cuadrícula está centrada
• stretch — ,
• space-around — ,
• space-between — , — ,
• space-evenly — ,

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content ( )

A veces, la altura total de los elementos de Grid (sus filas) es menor que la altura del contenedor. Esto puede suceder al definir elementos de tamaño fijo (usando px, por ejemplo). En este caso, podemos determinar el orden de las filas de Grid en el contenedor. Esta propiedad define la alineación de la cuadrícula a lo largo del eje del cuadro (columna), la alineación de filas (en contraposición a la propiedad "justify-content", que determina la alineación de la cuadrícula a lo largo del eje en línea, la alineación de columnas).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• inicio: desplaza la cuadrícula al comienzo del contenedor (borde superior)
• end: desplaza la cuadrícula al final del contenedor (borde inferior)
• centro: la cuadrícula está centrada
• estirar: las líneas se estiran para que la cuadrícula ocupe toda la altura del contenedor
• espacio alrededor: espacio igual entre líneas y la mitad de ese espacio alrededor de los bordes del contenedor
• espacio entre - la primera línea se desplaza al principio del contenedor, la última - hasta el final, el espacio libre se distribuye uniformemente entre el resto de las líneas
• espacio uniforme: espacio igual entre líneas y en los bordes del contenedor

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;
}

.container {
  align-content: space-between;
}

.container {
  align-content: space-evenly;
}

contenido del lugar

Esta propiedad es una abreviatura de align-content y justify-content.

.container {
  place-content: <align-content> <justify-content>;
}

• <align-content> <justify-content> es el primer valor para align-content, el segundo para justify-content. Si no hay un segundo valor, el primer valor se asigna a ambas propiedades.

Ejemplo:

.container {
  place-content: center start;
}

Las filas están centradas en el contenedor, las columnas están al principio.

grid-auto-column, grid-auto-rows (tamaño de las pistas implícitas)

Estas propiedades determinan el tamaño de las pistas generadas automáticamente (pistas implícitas). Las pistas implícitas se crean cuando hay más elementos que celdas en la cuadrícula o cuando un elemento se coloca fuera de la cuadrícula.

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• <track-size> - longitud, porcentaje o fracciones del espacio libre de la cuadrícula (usando la unidad "fr")

Ejemplo:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Esto crea una cuadrícula de 2x2.



Digamos que usamos las propiedades "grid-column" y "grid-row" para colocar los elementos de la siguiente manera:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

El elemento con clase "item-b" comienza con la línea vertical 5 y termina con la línea vertical 6, pero no hemos definido esas líneas. Dado que estamos haciendo referencia a líneas que no existen, se crean pistas implícitas de ancho cero para completar las sangrías. Podemos usar la propiedad "grid-auto-columnas" para definir el ancho de las pistas implícitas:

.container {
  grid-auto-columns: 60px;
}

rejilla-auto-flujo

El algoritmo de colocación automática se puede utilizar para colocar elementos fuera de la cuadrícula. La propiedad en consideración determina cómo debería funcionar el algoritmo dado.

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• fila (predeterminado): el algoritmo llena la fila actual hasta el límite y, si es necesario, cuando el ancho de la fila actual no es suficiente, crea una nueva fila
• columna: el algoritmo llena la columna actual hasta el límite y, si es necesario, cuando la altura de la columna actual es insuficiente, crea una nueva columna
• denso: relleno inteligente de la cuadrícula cuando hay elementos de diferentes tamaños

Tenga en cuenta que densa cambia el orden visual de los elementos, lo que puede tener un impacto negativo en la accesibilidad.



Supongamos que tenemos el siguiente marcado:

  <section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Definimos una cuadrícula con cinco columnas y dos filas y establecemos la propiedad "grid-auto-flow" en "fila" (que es la predeterminada):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Al colocar elementos en la cuadrícula, solo colocamos dos elementos:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Dado que el valor de la propiedad "grid-auto-flow" es "row", nuestra Grid se parece a la que se muestra en la imagen siguiente. Preste atención a la disposición de los elementos con las clases "item-b", "item-c" y "item-d" (se da preferencia a las filas):







si cambia el valor de la propiedad "grid-auto-flow" a "column", la cuadrícula se verá así manera (se da preferencia a las columnas):

cuadrícula

Esta propiedad es una abreviatura de grid-template-rows, grid-template-columnas, grid-template-areas, grid-auto-rows, grid-auto-columns y grid-auto-flow (tenga en cuenta que una declaración puede contener sólo propiedades "explícitas" o "implícitas").

• none: todas las propiedades aceptan valores predeterminados
• <grid-template>: similar al acceso directo de la plantilla de cuadrícula
• <grid-template-rows> / [auto-flow && dense?] <grid-auto-columns>? - define un valor para grid-template-rows. Si la palabra clave "flujo automático" está a la derecha de la barra, el valor de la propiedad "grid-auto-flow" se convierte en "columna". Si se especifica la palabra clave "denso" además de flujo automático, el algoritmo de anidación automática empaqueta los elementos en consecuencia. Si se omite el valor de la propiedad "grid-auto-columns", su valor se convierte en "auto"
• [autoflujo && denso?] <grid-auto-rows>? / <grid-template-columns>: define el valor de las columnas de plantilla de cuadrícula. Si la palabra clave "flujo automático" está a la izquierda de la barra, el valor de la propiedad "grid-auto-flow" se convierte en "fila". Si se especifica la palabra clave "denso" además de flujo automático, el algoritmo de anidamiento automático empaqueta los elementos en consecuencia. Si se omite el valor de la propiedad "grid-auto-rows", su valor se convierte en "auto"

Los siguientes dos bloques de código son equivalentes:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Los siguientes dos bloques de código son equivalentes:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Los siguientes dos bloques de código son equivalentes:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Y los siguientes dos bloques de código también son equivalentes:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

En este caso, podemos usar una sintaxis más compleja, pero al mismo tiempo más conveniente para definir simultáneamente las propiedades "grid-template-areas", "grid-template-rows" y "grid-template-columnas" y establecer otras propiedades a los valores predeterminados ... Lo que debe hacer para esto es definir los nombres de las líneas y los tamaños de las pistas con las áreas correspondientes en una línea. Esto es más fácil de demostrar con un ejemplo:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Esto es equivalente a lo siguiente:

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

Propiedades del elemento de cuadrícula

Tenga en cuenta que las propiedades flotante, display: inline-block, display: table-cell, vertical-align y column- * aplicadas a un elemento de cuadrícula no tienen ningún efecto.

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Estas propiedades determinan la posición de un elemento en la cuadrícula al ajustar a líneas específicas. grid-column-start / grid-row-start son las líneas de inicio del elemento, y grid-column-end / grid-row-end son las líneas finales.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

• <línea>: puede ser un número (que se ajusta al número de línea) o un nombre (que se ajusta al nombre de la línea)
• span <number> - el elemento se estirará para el número especificado de pistas
• span <nombre>: el elemento se estirará hasta que alcance la línea con el nombre especificado
• automático: diseño automático, expansión automática o extensión predeterminada de una columna

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Si no se especifican valores de propiedad grid-column-end / grid-row-end, el elemento ocupará 1 pista de forma predeterminada.



Los elementos pueden superponerse entre sí. Puede utilizar la propiedad z-index para controlar el orden de apilamiento de los elementos.

columna de cuadrícula, fila de cuadrícula

Estas propiedades son una abreviatura de grid-column-start + grid-column-end y grid-row-start + grid-row-end, respectivamente.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• <start-line> / <end-line>: los valores son los mismos que las propiedades originales, incluido el intervalo

Ejemplo:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Si no se define una línea final, el elemento se establecerá por defecto en 1 pista.

área de cuadrícula

Esta propiedad define el nombre del elemento, que se utiliza como valor en la propiedad grid-template-areas. grid-area también se puede utilizar como forma abreviada de grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• <nombre>: nombre arbitrario del elemento
• <row-start> / <column-start> / <row-end> / <column-end> - pueden ser números o nombres de línea

Nombrar un elemento:

.item-d {
  grid-area: header;
}

Abreviatura de grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

justificarse

Esta propiedad especifica la alineación de un elemento en una celda a lo largo del eje de la fila (a diferencia de la propiedad align-self, que especifica la alineación a lo largo del eje de la caja (columna)). Esta propiedad se aplica a un elemento dentro de una sola celda.

.item {
  justify-self: start | end | center | stretch;
}

• inicio: el elemento se desplaza al comienzo de la celda (borde izquierdo)
• fin: el elemento se desplaza al final de la celda (borde derecho)
• centro - el elemento está centrado
• estirar: el elemento ocupa todo el ancho de la celda

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

La propiedad justify-items se usa para controlar la alineación de todos los elementos de Grid a lo largo del eje de línea.

alinearse

Esta propiedad determina la alineación de un elemento en una celda a lo largo del eje de la caja (columna) (a diferencia de la propiedad justify-self, que determina la alineación a lo largo del eje de la fila). Esta propiedad se aplica a un elemento dentro de una sola celda.

.item {
  align-self: start | end | center | stretch;
}

• inicio: el elemento se desplaza al principio de la celda (borde superior)
• fin: el elemento se desplaza al final de la celda (borde inferior)
• centro - el elemento está centrado
• estirar: el elemento ocupa toda la altura de la celda

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

La propiedad align-items se usa para controlar la alineación de todos los elementos de Grid a lo largo del eje del bloque (columna).

lugar-yo

Esta propiedad es una abreviatura de align-self y justify-self.

• auto - valor predeterminado
• <align-self> / <justify-self> es el primer valor para align-self, el segundo para justify-self. Si se omite el segundo valor, el primer valor se aplica a ambas propiedades

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

• , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
• , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
• repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
• La combinación de estas características permite una increíble flexibilidad de diseño, por ejemplo: grid-template-column: repeat (auto-fill, minmax (200px, 1fr)) (del ejemplo al comienzo de la sección Grid)

Recursos útiles

• Especificación
• MDN
• Hoja de referencia de cuadrícula
• Jardín de cuadrícula

Apoyo

Tutorial

En este tutorial, crearemos un entrenador simple para las propiedades básicas de Flexbox.

Margen

<main>
  <div id="controls">
    <div id="buttons">
      <button data-btn="addBtn">Add Item</button>
      <button data-btn="removeBtn">Remove Item</button>
    </div>
    <fieldset id="flexContainerProps">
      <legend>Flex Container Props</legend>
      <label for="flexDirection">flex-direction</label>
      <select id="flexDirection">
        <option value="row" selected>row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <label for="flexWrap">flex-wrap</label>
      <select id="flexWrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap" selected>wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>

      <label for="justifyContent">justify-content</label>
      <select id="justifyContent">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>

      <label for="alignItems">align-items</label>
      <select id="alignItems">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>

      <label for="alignContent">align-content</label>
      <select id="alignContent">
        <option value="flex-start" selected>flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>
    </fieldset>

    <fieldset id="flexItemProps">
      <legend>Flex Item Props</legend>
      <label for="order">order</label>
      <input
        id="order"
        type="number"
        min="-5"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexGrow">flex-grow</label>
      <input
        id="flexGrow"
        type="number"
        min="0"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexShrink">flex-shrink</label>
      <input
        id="flexShrink"
        type="number"
        min="1"
        max="6"
        step="1"
        value="1"
      />

      <label for="alignSelf">align-self</label>
      <select id="alignSelf">
        <option value="auto" selected>auto</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>
    </fieldset>
  </div>

  <div id="flexContainer">
    <div class="flex-item selected">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
  </div>
</main>

Aquí tenemos un flexContainer con seis elementos flexibles y controles para controlar el cambio entre las propiedades de un contenedor flexible (flexContainerProps) y el elemento flexible seleccionado (flexItemProps). También en el segundo contenedor, tiene dos botones: uno para agregar un elemento al contenedor flexible (addBtn), el otro para eliminar el último elemento flexible (removeBtn).

Estilos

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls {
  margin-right: 0.4rem;
}

#buttons {
  margin: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 0.2rem;
}

label {
  display: block;
  margin: 0.4rem;
}

select {
  width: 100%;
}

#flexContainer {
  width: 600px;
  height: 600px;
  border: 1px dashed #222;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  min-width: 178px;
  min-height: 178px;
  background: radial-gradient(circle, yellow, orange);
  border: 1px solid #222;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #222;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.flex-item:nth-child(2n) {
  min-width: 158px;
  min-height: 158px;
}

.flex-item:nth-child(3n) {
  min-width: 198px;
  min-height: 198px;
}

.flex-item.selected {
  background: radial-gradient(circle, lightgreen, darkgreen);
}

Los elementos flexibles deben ser de diferentes tamaños y al mismo tiempo flexibles. Logramos esto con min-width / min-height y nth-child. El elemento seleccionado es de la clase "seleccionado" con un color de fondo diferente.

Guión

//    
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')

//   
buttons.addEventListener('click', (e) => {
  //     
  if (e.target.tagName !== 'BUTTON') return

  //   
  const { btn } = e.target.dataset

  switch (btn) {
    //        -
    case 'addBtn':
      //     6 
      //      -
      //    
      const num = document.querySelectorAll('.flex-item').length + 1
      // ,      7 
      //   
      if (num < 7) {
        //    "div"
        const newItem = document.createElement('div')
        //    
        newItem.className = 'flex-item'
        //  
        newItem.textContent = num
        //    -
        flexContainer.append(newItem)
      }
      break
    //      -
    case 'removeBtn':
      //    
      const index = document.querySelectorAll('.flex-item').length - 1
      // ,      0
      //      -
      if (index > 0) {
        //  ,  
        const itemToRemove = document.querySelectorAll('.flex-item')[index]
        //   
        itemToRemove.remove()
      }
      break
  }
})

//     
controls.addEventListener('change', (e) => {
  //    
  const prop = e.target.id
  //    
  const value = e.target.value

  // ,   
  //  -    -
  //      
  if (e.target.parentElement.id === 'flexContainerProps') {
    flexContainer.style[prop] = value
  } else {
    const selectedItem = document.querySelector('.selected')
    selectedItem.style[prop] = value
  }
})

//   -
flexContainer.addEventListener('click', (e) => {
  //        -
  if (
    e.target.className !== 'flex-item' ||
    e.target.classList.contains('selected')
  )
    return

  //     "selected"    
  if (document.querySelector('.selected') !== null)
    document.querySelector('.selected').classList.remove('selected')

  //      
  e.target.classList.add('selected')

  //   -      "-"
  //       
  //      -
  //    
  //   ,     

  //         
  //         -
  const getStyle = (property, element = e.target) =>
    getComputedStyle(element).getPropertyValue(property)

  //  ,      DOM-,   "id", 
  //  ,     
  order.value = getStyle('order')
  flexGrow.value = getStyle('flex-grow')
  flexShrink.value = getStyle('flex-shrink')
  alignSelf.value = getStyle('align-self')
})

Como ves, nada complicado. Por supuesto, la funcionalidad del simulador resultante es muy limitada. Sin embargo, creo que esto es suficiente para comprender cómo funcionan las propiedades básicas de Flexbox.



Recomiendo intentar crear un simulador similar basado en las propiedades básicas de Grid; esta será una práctica excelente y le permitirá comprender todo correctamente.







También puede encontrar interesante uno de mis proyectos recientes, la plantilla de inicio HTML moderno .



Gracias por su atención y que tenga un buen día.