Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Patrones comunes de diseño de CSS Flexbox con código de ejemplo

En teoría, es bastante sencillo usar flexbox (Módulo de caja flexible) para crear diseños complejos, pero a menudo me encuentro agregando display: flexa un elemento y luego pasando una eternidad tratando de descubrir cómo hacer que algo se comporte como esperaba . Si eres como yo: aquí hay una lista de 10 ejemplos de diseños de flexbox con CSS que puedes copiar y pegar para comenzar con tus propios diseños. Recorreremos estos patrones de diseño básicos (haga clic para saltar a un ejemplo):
Estirar todo
Estiramiento medio
Rejilla alterna
Rejilla 3x3
3x3 (1: 1)
3x3 (16: 9)
Barras horizontales
Barras verticales
Pila vertical
Albañilería
Cada ejemplo asume que su HTML contiene un elemento con una clase de la containercual contiene varios hijos que tienen una clase de item(el número de hijos varía por ejemplo):
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

Estirar todo, espaciado fijohttps://tobiasahlin.com/blog/common-flexbox-patterns/#stretch-all-fixed-spacing

El patrón de caja flexible más básico: conseguir que algunas cajas se estiren y llenen todo el ancho de su elemento padre. Todo lo que necesita hacer es establecer display: flexen el contenedor y un flex-growvalor anterior 0en los elementos secundarios:
.container {
  display: flex;
}

.item {
  flex-grow: 1;
  height: 100px;
}

.item + .item {
  margin-left: 2%;
}
Usamos un +selector para agregar solo espacios entre pares de elementos (esencialmente solo omitiendo el margen izquierdo para el primer elemento de la lista).
El aumento flex-growaumentará la cantidad de espacio que un elemento puede estirar en comparación con cualquier otro elemento. Si nos fijamos flex-growen 2el elemento medio aquí, nos básicamente dividir el espacio disponible en 6 trozos (1 trozo por cada artículo más 1 adicional para el elemento central, 1 + 1 + 2 + 1 + 1). El elemento del medio obtiene dos fragmentos ( flex-grow: 2) de espacio, y todos los demás elementos obtienen un fragmento ( flex-grow: 1).

Estirar en el medio, espaciado fijohttps://tobiasahlin.com/blog/common-flexbox-patterns/#stretch-middle-fixed-spacing

Una aplicación común y un patrón web es crear una barra superior donde queremos estirar solo el elemento central, pero mantener fijos los elementos más a la derecha y a la izquierda. Si solo queremos que un elemento se estire, podemos establecer un ancho fijo (p 100pxEj. ) En un elemento que debería permanecer estático, y flex-grow: 1en el elemento que debería estirarse:
.container {
  display: flex;
}

.item {
  height: 100px;
  width: 100px; /* A fixed width as the default */
}

.item-center { 
  flex-grow: 1; /* Set the middle element to grow and stretch */
}

.item + .item { 
  margin-left: 2%; 
}
Incluso si el elemento central que aquí se ha definido una widthde las 100pxflex-growhará que sea estirar para ocupar todo el espacio disponible.

Cuadrícula alternahttps://tobiasahlin.com/blog/common-flexbox-patterns/#alternating-grid

Un patrón de diseño que uso en la descripción general de mi blog es crear una cuadrícula con alguna variación: después de cada fila de dos elementos del mismo tamaño, hay un elemento que ocupa una fila completa:
Para lograr esto necesitamos:
  1. Establecer flex-wrap: wrapen el contenedor (o todo itemsse representaría en una sola fila)
  2. Establezca justify-content: space-betweenen el contenedor, para crear solo espacio entre los elementos (y no entre el borde del elemento principal y los elementos)
  3. Establezca cada elemento widthen 49%(o algo similar que sea igual o menor que 50%)
  4. Establezca cada tercer elemento widthpara 100%que llene toda esa fila. Podemos seleccionar cada tercer elemento de la lista con el nth-child()selector.
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}

.item:nth-child(3n) {
  width: 100%;
}
Si desea que la primera fila sea de ancho completo y que los dos elementos siguientes compartan una fila, tenga en cuenta que no puede escribir .item:nth-child(1n) { width: 100% }, ya que apuntaría a todos los elementos. Usted tiene que apuntar el primer elemento seleccionando cada tercer elemento y, a continuación, dar un paso atrás dos elementos: .item:nth-child(3n-2) { width: 100% }.

Cuadrícula 3x3https://tobiasahlin.com/blog/common-flexbox-patterns/#3x3-grid

Podemos crear una cuadrícula de 3x3 ajustando flex-grow0flex-basisa la anchura preferida para todos los niños (en este caso realizado utilizando la flextaquigrafía: flex: 0 32%). Los márgenes entre los elementos son las sobras de cada fila, es decir (100% -32x3) / 2 = 2%. Coincidí con el margen ( margin-bottom: 2%) para lograr un espaciado uniforme entre todos los elementos:
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 0 32%;
  height: 100px;
  margin-bottom: 2%; /* (100-32*3)/2 */
}
Puede cambiar flex-basispara aumentar o disminuir el número de elementos en cada fila. flex: 0 24%pondría 4 artículos en cada fila, flex: 0 19%pondría 5 artículos en cada fila, y así sucesivamente.

Cuadrícula 3x3, proporciones restringidas (1: 1)https://tobiasahlin.com/blog/common-flexbox-patterns/#3x3-grid-constrained-proportions-11

Podemos crear una cuadrícula llena de elementos con proporciones restringidas mediante el uso de un paddingtruco CSS un tanto extravagante Si usamos %al establecer paddingun elemento, paddingse establece en relación con el elemento primario de ese elemento width.containeren este caso. Podemos usar ese efecto para crear un cuadrado configurando un elemento widthpadding-bottomcon el mismo valor (y configurando efectivamente el heightelemento a través padding-bottom):
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 32%; /* Same as width, sets height */
  margin-bottom: 2%; /* (100-32*3)/2 */
  position: relative;
}
Puesto que hemos creado un elemento que se hizo efectiva de solamente el relleno, y no hay lugar dejado por el contenido, es necesario establecer position: relativeen el .itemen este ejemplo y añadir un elemento secundario con position: absolute, y utilizar ese elemento de “reiniciar” el lienzo y agregar contenido.

Cuadrícula 3x3, proporciones restringidas (16: 9)https://tobiasahlin.com/blog/common-flexbox-patterns/#3x3-grid-constrained-proportions-169

Para cambiar las proporciones de los elementos, todo lo que necesita hacer es cambiar las proporciones de widthpadding-bottomen el .itemCambio de la widthafectaría el número de elementos en cada fila, a fin de no afectar a la estructura de rejilla que puede, por ejemplo el cambio padding-bottom18%crear 16: 9 (equivalente a 32:18) rectángulos.
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 18%; /* 32:18, i.e. 16:9 */
  margin-bottom: 2%; /* (100-32*3)/2 */
}

Gráfico: barras verticaleshttps://tobiasahlin.com/blog/common-flexbox-patterns/#graph-vertical-bars

Si desea usar flexbox para crear una visualización gráfica simple, todo lo que necesita hacer es configurar align-itemsel contenedor flex-endy definir un heightpara cada barra. flex-endse asegurará de que las barras estén ancladas en la parte inferior del gráfico.
.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  align-items: flex-end;
}

.item { width: 14%; }
.item-1 { height: 40%; }
.item-2 { height: 50%; }
.item-3 { height: 60%; }
.item-4 { height: 20%; }
.item-5 { height: 30%; }

Gráfico: barras horizontaleshttps://tobiasahlin.com/blog/common-flexbox-patterns/#graph-horizontal-bars

Usando la misma técnica que para las barras verticales, simplemente podemos agregar flex-directionel containervalor de columncrear un conjunto de barras horizontales. flex-directionpuede tener un valor de row(predeterminado) o column, donde un rowcorre horizontalmente (→) y un columncorre verticalmente (↓). También puede invertir la dirección de ambos usando row-reverse(←) y column-reverse(↑) respectivamente.
.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  flex-direction: column;
}

.item { height: 14%; }
.item-1 { width: 40%; }
.item-2 { width: 50%; }
.item-3 { width: 60%; }
.item-4 { width: 20%; }
.item-5 { width: 30%; }

Pila vertical (centrada)https://tobiasahlin.com/blog/common-flexbox-patterns/#vertical-stack-centered

Para crear una pila vertical y hacer que los elementos se ejecuten de arriba a abajo, todo lo que tenemos que hacer es cambiar el flex-directionvalor predeterminado de rowcolumn:
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  height: 40px;
  margin-bottom: 10px;
}

Albañilería (o mosaico)https://tobiasahlin.com/blog/common-flexbox-patterns/#masonry-or-mosaic

1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
Probablemente haya visto diseños de mampostería (o mosaico) en todo Internet, pero es probable que todos hayan sido alimentados por Masonry o una biblioteca JavaScript similar. Flexbox puede parecer un gran candidato para finalmente crear este diseño solo con CSS, y ciertamente es posible, pero es sorprendentemente hacky.
Uno de los principales desafíos de crear un diseño de mampostería con flexbox es que para hacer que un elemento afecte la posición de un elemento encima y debajo de este, necesitamos cambiar flex-directionel contenedor column, lo que hace que los elementos se ejecuten de arriba a abajo. Esto crea un diseño que se ve muy bien y similar al efecto de mampostería, pero podría ser confuso para los usuarios; crea un ordenamiento inesperado de elementos. Si lees de izquierda a derecha, los elementos parecen estar mezclados y aparecen en un orden aparentemente aleatorio, por ejemplo, 1, 3, 6, 2, 4, 7, 8, etc.
Afortunadamente, podemos usar la orderpropiedad para cambiar en qué orden se representan los elementos. Podemos combinar esa propiedad con un uso inteligente del nth-child()selector para ordenar elementos dinámicamente dependiendo de su orden original. Si queremos crear un diseño de mampostería con tres columnas, podemos dividir todos los elementos en tres "grupos", así:
/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
He escrito otra publicación que explica en detalle cómo funciona esto y por qué . Esto establecerá el orderque 1para el primero elemento, cuarto elemento, séptimo elemento, etc. elementos con el mismo orderse ordenará valor en orden ascendente de acuerdo con el orden del código fuente, o cuyo valor fue establecido primero, por lo que en este ejemplo estamos produciendo tres conjuntos ordenados así: 1, 4, 7, 10(3n + 1) con order: 12, 5, 8(3n + 2) con order: 2, y 3, 6, 9(3n) con order: 3Estos tres grupos representan nuestras tres columnas. Armar el orden se hace 1, 4, 7, 10, 2, 5, 8, 3, 6, 9.
Si nos aseguramos de representar cada uno de esos grupos como una columna (ni más ni menos), creará la ilusión de que los elementos han vuelto a su orden original cuando lees de izquierda a derecha. Si analizamos visualmente la cuadrícula como filas, la primera fila contendrá el primer elemento de cada grupo ( 1, 2, 3), la segunda fila contendrá el segundo elemento de cada grupo ( 4, 5, 6), y así sucesivamente. Luego, insertamos elementos entre las columnas que ocupan el 100% de la altura del padre, lo que obliga a las columnas a saltos de línea y no se fusionan accidentalmente con columnas adyacentes. Aquí está el fragmento completo de CSS:
.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 580px;
}

.item {
  width: 32%;
  margin-bottom: 2%; /* (100-32*3)/2 */
}

/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
Visualmente, esto logra algo que está muy cerca del efecto de mampostería. ¿Cómo se ve afectado el orden de tabulación? Por suerte, no del todo. ordersolo cambia la representación visual de los objetos, no el orden de tabulación, por lo que tabular a través de la cuadrícula funcionará según lo previsto.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas