La guía completa de CSS Flexbox - Curso CSS Flexbox

Nuestra guía completa de CSS flexbox. Flexbox es una habilidad imprescindible para los desarrolladores web. Flexbox le brinda todas las herramientas que necesita para organizar correctamente el contenido dentro de contenedores flexibles.

Una vez que haya aprendido Flexbox, se preguntará cómo se las arregló para crear sitios web sin él. Este curso lo pone al día lo más rápido posible.

Flexbox le brinda todas las herramientas que necesita para organizar correctamente el contenido dentro de contenedores flexibles. Dado que todos los sitios web deben ser flexibles y receptivos en estos días, Flexbox es una habilidad imprescindible para los desarrolladores web.

El curso contiene lo siguiente:

• Tu primer diseño Flexbox
• Eje principal y eje transversal
• Justificar contenido
• Elementos de posicionamiento
• La propiedad de flexión
• Alinear elementos
• Columna de dirección de flexión
• Envase
• Flexionar crecer, encoger
• Orden
• Creación de una barra de navegación receptiva
• Creación de una cuadrícula de imagen Flexbox

---

Fondo

El Flexbox Layoutmódulo (Flexible Box) tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (de ahí la palabra "flex").

La idea principal detrás del diseño flexible es darle al contenedor la capacidad de modificar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio disponible (principalmente para adaptarse a todo tipo de dispositivos de visualización y tamaños de pantalla). Un contenedor flexible expande los elementos para llenar el espacio libre disponible o los reduce para evitar el desbordamiento.

Lo que es más importante, el diseño de flexbox es independiente de la dirección a diferencia de los diseños normales (bloque que tiene una base vertical y en línea que tiene una base horizontal). Si bien funcionan bien para las páginas, carecen de flexibilidad (sin juego de palabras) para admitir aplicaciones grandes o complejas (especialmente cuando se trata de cambiar la orientación, cambiar el tamaño, estirar, encoger, etc.).

Nota: el diseño de Flexbox es más apropiado para los componentes de una aplicación y diseños de pequeña escala, mientras que el diseño de cuadrícula está diseñado para diseños de mayor escala.

Conceptos básicos y terminología

Dado que flexbox es un módulo completo y no una sola propiedad, implica muchas cosas, incluido su conjunto completo de propiedades. Algunos de ellos están destinados a establecerse en el contenedor (elemento principal, conocido como "contenedor flexible"), mientras que otros están destinados a establecerse en los elementos secundarios (dichos "elementos flexibles").

Si el diseño "regular" se basa en direcciones de flujo en bloque y en línea, el diseño flexible se basa en "direcciones de flujo flexible". Eche un vistazo a esta figura de la especificación, que explica la idea principal detrás del diseño flexible.

Los elementos se distribuirán siguiendo el eje main axis(de main-starta main-end) o la cruz (de cross-starta cross-end).

• eje principal : el eje principal de un contenedor flexible es el eje principal a lo largo del cual se disponen los elementos flexibles. Cuidado, no es necesariamente horizontal; Depende de la flex-directionpropiedad (ver más abajo).
• inicio principal | main-end : los elementos flexibles se colocan dentro del contenedor comenzando desde el inicio principal y yendo al extremo principal.
• tamaño principal : el ancho o la altura de un elemento flexible, lo que esté en la dimensión principal, es el tamaño principal del elemento. La propiedad de tamaño principal del elemento flexible es la propiedad 'ancho' o 'alto', cualquiera que esté en la dimensión principal.
• eje transversal : el eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
• inicio cruzado | extremo cruzado : las líneas flexibles se llenan con artículos y se colocan en el contenedor comenzando en el lado de inicio cruzado del contenedor flexible y yendo hacia el lado del extremo cruzado.
• tamaño cruzado : el ancho o la altura de un elemento flexible, lo que esté en la dimensión cruzada, es el tamaño cruzado del elemento. La propiedad de tamaño cruzado es cualquiera de 'ancho' o 'alto' que esté en la dimensión cruzada.

Propiedades para el padre

(contenedor flexible)

mostrar

Esto define un contenedor flexible; en línea o bloque dependiendo del valor dado. Permite un contexto flexible para todos sus hijos directos.

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

Tenga en cuenta que las columnas CSS no tienen efecto en un contenedor flexible.

dirección de flexión

Esto establece el eje principal, definiendo así la dirección en que se colocan los artículos flexibles en el contenedor flexible. Flexbox es (aparte del envoltorio opcional) un concepto de diseño de una sola dirección. Piense en los elementos flexibles como dispuestos principalmente en filas horizontales o columnas verticales.

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

• row(predeterminado): de izquierda a derecha en ltr; de derecha a izquierda enrtl
• row-reverse: de derecha a izquierda en ltr; de izquierda a derecha enrtl
• column: igual que rowpero de arriba a abajo
• column-reverse: igual que row-reversepero de abajo hacia arriba

envoltura flexible

De forma predeterminada, todos los elementos flexibles intentarán encajar en una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta propiedad.

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

• nowrap(predeterminado): todos los elementos flexibles estarán en una línea
• wrap: los elementos flexibles se ajustarán a varias líneas, de arriba a abajo.
• wrap-reverse: los elementos flexibles se ajustarán a varias líneas de abajo hacia arriba.

flujo flexible

Esta es una forma abreviada de las propiedades flex-directiony flex-wrap, que juntas definen los ejes principal y transversal del contenedor flexible. El valor predeterminado es row nowrap.

.container {
  flex-flow: column wrap;
}

justificar-contenido

Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre adicional sobrante cuando todos los elementos flexibles de una línea son inflexibles o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los elementos cuando desbordan la línea.

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

• flex-start(predeterminado): los artículos se empaquetan hacia el inicio de la dirección flexible.
• flex-end: los artículos se embalan hacia el final de la dirección de flexión.
• start: los artículos se empaquetan hacia el inicio de la writing-modedirección.
• end: los artículos se embalan hacia el final de la writing-modedirección.
• left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Note that that browser support for these values is nuanced. For example, space-between never got support from some versions of Edge, and start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center.

There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).

align-items

Esto define el comportamiento predeterminado de cómo se distribuyen los elementos flexibles a lo largo del eje transversal en la línea actual. Piense en ello como la justify-contentversió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;
}

• stretch(predeterminado): estirar para llenar el contenedor (aún respeta el ancho mínimo/ancho máximo)
• flex-start// start: self-startlos elementos se colocan al principio del eje transversal. La diferencia entre estos es sutil, y se trata de respetar las flex-directionreglas o las writing-modereglas.
• flex-end// end: self-endlos elementos se colocan al final del eje transversal. La diferencia nuevamente es sutil y se trata de respetar flex-directionreglas contra writing-modereglas.
• center: los elementos están centrados en el eje transversal
• baseline: los elementos están alineados como sus líneas base se alinean

Las palabras clave modificadoras safey unsafese pueden usar junto con el resto de estas palabras clave (aunque tenga en cuenta la compatibilidad del navegador ), y tratan de ayudarlo a evitar la alineación de elementos de modo que el contenido se vuelva inaccesible.

alinear-contenido

Esto alinea las líneas de un contenedor flexible cuando hay espacio adicional en el eje transversal, de forma similar a como se justify-contentalinean los elementos individuales dentro del eje principal.

Nota: esta propiedad no tiene efecto cuando solo hay una línea de elementos flexibles.

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

• flex-start/ start: artículos embalados al inicio del contenedor. El (más compatible) flex-starthonra el flex-directionmientras que starthonra la writing-modedirección.
• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: items evenly distributed with equal space around each line
• space-evenly: items are evenly distributed with equal space around them
• stretch (default): lines stretch to take up the remaining space

The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.

Properties for the Children

(flex items)

order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

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

flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

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

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

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

Negative numbers are invalid.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” – this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

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

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

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

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

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

Note that float, clear and vertical-align have no effect on a flex item.

Examples

Empecemos con un ejemplo muy muy sencillo, resolviendo un problema casi diario: el centrado perfecto. No podría ser más simple si usas flexbox.

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

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

Esto se basa en el hecho de que un margen establecido autoen un contenedor flexible absorbe espacio adicional. Por lo tanto, establecer un margen vertical de autohará que el elemento quede perfectamente centrado en ambos ejes.

Ahora usemos algunas propiedades más. Considere una lista de 6 elementos, todos con dimensiones fijas, pero que pueden ajustarse automáticamente. Queremos que se distribuyan uniformemente en el eje horizontal para que cuando cambiemos el tamaño del navegador, todo se escale bien y sin consultas de medios.

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Hecho. Todo lo demás es solo una preocupación de estilo. A continuación se muestra un bolígrafo con este ejemplo. Asegúrese de ir a CodePen e intente cambiar el tamaño de sus ventanas para ver qué sucede.

CodePen Embed Fallback

Probemos otra cosa. Imagine que tenemos un elemento de navegación alineado a la derecha en la parte superior de nuestro sitio web, pero queremos que esté centrado en pantallas medianas y de una sola columna en dispositivos pequeños. Suficientemente fácil.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

CodePen Embed Fallback

¡Intentemos algo aún mejor jugando con la flexibilidad de los elementos flexibles! ¿Qué pasa con un diseño de 3 columnas primero móvil con encabezado y pie de página de ancho completo? E independiente del orden de origen.

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

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1\. header
 * 2\. article
 * 3\. aside 1
 * 4\. aside 2
 * 5\. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

CodePen Embed Fallback

Prefijo Flexbox

Flexbox requiere algunos prefijos de proveedores para admitir la mayoría de los navegadores posibles. No solo incluye propiedades antepuestas con el prefijo del proveedor, sino que en realidad hay nombres de propiedades y valores completamente diferentes. Esto se debe a que la especificación Flexbox ha cambiado con el tiempo, creando versiones "antiguas", "interpoladas" y "nuevas".

Quizás la mejor manera de manejar esto es escribir en la sintaxis nueva (y final) y ejecutar su CSS a través de Autoprefixer, que maneja los retrocesos muy bien.

Alternativamente, aquí hay un Sass @mixinpara ayudar con algunos de los prefijos, que también le da una idea de qué tipo de cosas se deben hacer:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

#css

What is GEEK

Buddha Community

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

La guía completa de CSS Flexbox - Curso CSS Flexbox

Nuestra guía completa de CSS flexbox. Flexbox es una habilidad imprescindible para los desarrolladores web. Flexbox le brinda todas las herramientas que necesita para organizar correctamente el contenido dentro de contenedores flexibles.

Una vez que haya aprendido Flexbox, se preguntará cómo se las arregló para crear sitios web sin él. Este curso lo pone al día lo más rápido posible.

Flexbox le brinda todas las herramientas que necesita para organizar correctamente el contenido dentro de contenedores flexibles. Dado que todos los sitios web deben ser flexibles y receptivos en estos días, Flexbox es una habilidad imprescindible para los desarrolladores web.

El curso contiene lo siguiente:

• Tu primer diseño Flexbox
• Eje principal y eje transversal
• Justificar contenido
• Elementos de posicionamiento
• La propiedad de flexión
• Alinear elementos
• Columna de dirección de flexión
• Envase
• Flexionar crecer, encoger
• Orden
• Creación de una barra de navegación receptiva
• Creación de una cuadrícula de imagen Flexbox

---

Fondo

El Flexbox Layoutmódulo (Flexible Box) tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (de ahí la palabra "flex").

La idea principal detrás del diseño flexible es darle al contenedor la capacidad de modificar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio disponible (principalmente para adaptarse a todo tipo de dispositivos de visualización y tamaños de pantalla). Un contenedor flexible expande los elementos para llenar el espacio libre disponible o los reduce para evitar el desbordamiento.

Lo que es más importante, el diseño de flexbox es independiente de la dirección a diferencia de los diseños normales (bloque que tiene una base vertical y en línea que tiene una base horizontal). Si bien funcionan bien para las páginas, carecen de flexibilidad (sin juego de palabras) para admitir aplicaciones grandes o complejas (especialmente cuando se trata de cambiar la orientación, cambiar el tamaño, estirar, encoger, etc.).

Nota: el diseño de Flexbox es más apropiado para los componentes de una aplicación y diseños de pequeña escala, mientras que el diseño de cuadrícula está diseñado para diseños de mayor escala.

Conceptos básicos y terminología

Dado que flexbox es un módulo completo y no una sola propiedad, implica muchas cosas, incluido su conjunto completo de propiedades. Algunos de ellos están destinados a establecerse en el contenedor (elemento principal, conocido como "contenedor flexible"), mientras que otros están destinados a establecerse en los elementos secundarios (dichos "elementos flexibles").

Si el diseño "regular" se basa en direcciones de flujo en bloque y en línea, el diseño flexible se basa en "direcciones de flujo flexible". Eche un vistazo a esta figura de la especificación, que explica la idea principal detrás del diseño flexible.

Los elementos se distribuirán siguiendo el eje main axis(de main-starta main-end) o la cruz (de cross-starta cross-end).

• eje principal : el eje principal de un contenedor flexible es el eje principal a lo largo del cual se disponen los elementos flexibles. Cuidado, no es necesariamente horizontal; Depende de la flex-directionpropiedad (ver más abajo).
• inicio principal | main-end : los elementos flexibles se colocan dentro del contenedor comenzando desde el inicio principal y yendo al extremo principal.
• tamaño principal : el ancho o la altura de un elemento flexible, lo que esté en la dimensión principal, es el tamaño principal del elemento. La propiedad de tamaño principal del elemento flexible es la propiedad 'ancho' o 'alto', cualquiera que esté en la dimensión principal.
• eje transversal : el eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
• inicio cruzado | extremo cruzado : las líneas flexibles se llenan con artículos y se colocan en el contenedor comenzando en el lado de inicio cruzado del contenedor flexible y yendo hacia el lado del extremo cruzado.
• tamaño cruzado : el ancho o la altura de un elemento flexible, lo que esté en la dimensión cruzada, es el tamaño cruzado del elemento. La propiedad de tamaño cruzado es cualquiera de 'ancho' o 'alto' que esté en la dimensión cruzada.

Propiedades para el padre

(contenedor flexible)

mostrar

Esto define un contenedor flexible; en línea o bloque dependiendo del valor dado. Permite un contexto flexible para todos sus hijos directos.

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

Tenga en cuenta que las columnas CSS no tienen efecto en un contenedor flexible.

dirección de flexión

Esto establece el eje principal, definiendo así la dirección en que se colocan los artículos flexibles en el contenedor flexible. Flexbox es (aparte del envoltorio opcional) un concepto de diseño de una sola dirección. Piense en los elementos flexibles como dispuestos principalmente en filas horizontales o columnas verticales.

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

• row(predeterminado): de izquierda a derecha en ltr; de derecha a izquierda enrtl
• row-reverse: de derecha a izquierda en ltr; de izquierda a derecha enrtl
• column: igual que rowpero de arriba a abajo
• column-reverse: igual que row-reversepero de abajo hacia arriba

envoltura flexible

De forma predeterminada, todos los elementos flexibles intentarán encajar en una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta propiedad.

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

• nowrap(predeterminado): todos los elementos flexibles estarán en una línea
• wrap: los elementos flexibles se ajustarán a varias líneas, de arriba a abajo.
• wrap-reverse: los elementos flexibles se ajustarán a varias líneas de abajo hacia arriba.

flujo flexible

Esta es una forma abreviada de las propiedades flex-directiony flex-wrap, que juntas definen los ejes principal y transversal del contenedor flexible. El valor predeterminado es row nowrap.

.container {
  flex-flow: column wrap;
}

justificar-contenido

Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre adicional sobrante cuando todos los elementos flexibles de una línea son inflexibles o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los elementos cuando desbordan la línea.

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

• flex-start(predeterminado): los artículos se empaquetan hacia el inicio de la dirección flexible.
• flex-end: los artículos se embalan hacia el final de la dirección de flexión.
• start: los artículos se empaquetan hacia el inicio de la writing-modedirección.
• end: los artículos se embalan hacia el final de la writing-modedirección.
• left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Note that that browser support for these values is nuanced. For example, space-between never got support from some versions of Edge, and start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center.

There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).

align-items

Esto define el comportamiento predeterminado de cómo se distribuyen los elementos flexibles a lo largo del eje transversal en la línea actual. Piense en ello como la justify-contentversió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;
}

• stretch(predeterminado): estirar para llenar el contenedor (aún respeta el ancho mínimo/ancho máximo)
• flex-start// start: self-startlos elementos se colocan al principio del eje transversal. La diferencia entre estos es sutil, y se trata de respetar las flex-directionreglas o las writing-modereglas.
• flex-end// end: self-endlos elementos se colocan al final del eje transversal. La diferencia nuevamente es sutil y se trata de respetar flex-directionreglas contra writing-modereglas.
• center: los elementos están centrados en el eje transversal
• baseline: los elementos están alineados como sus líneas base se alinean

Las palabras clave modificadoras safey unsafese pueden usar junto con el resto de estas palabras clave (aunque tenga en cuenta la compatibilidad del navegador ), y tratan de ayudarlo a evitar la alineación de elementos de modo que el contenido se vuelva inaccesible.

alinear-contenido

Esto alinea las líneas de un contenedor flexible cuando hay espacio adicional en el eje transversal, de forma similar a como se justify-contentalinean los elementos individuales dentro del eje principal.

Nota: esta propiedad no tiene efecto cuando solo hay una línea de elementos flexibles.

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

• flex-start/ start: artículos embalados al inicio del contenedor. El (más compatible) flex-starthonra el flex-directionmientras que starthonra la writing-modedirección.
• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: items evenly distributed with equal space around each line
• space-evenly: items are evenly distributed with equal space around them
• stretch (default): lines stretch to take up the remaining space

The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.

Properties for the Children

(flex items)

order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

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

flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

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

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

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

Negative numbers are invalid.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” – this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

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

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

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

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

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

Note that float, clear and vertical-align have no effect on a flex item.

Examples

Empecemos con un ejemplo muy muy sencillo, resolviendo un problema casi diario: el centrado perfecto. No podría ser más simple si usas flexbox.

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

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

Esto se basa en el hecho de que un margen establecido autoen un contenedor flexible absorbe espacio adicional. Por lo tanto, establecer un margen vertical de autohará que el elemento quede perfectamente centrado en ambos ejes.

Ahora usemos algunas propiedades más. Considere una lista de 6 elementos, todos con dimensiones fijas, pero que pueden ajustarse automáticamente. Queremos que se distribuyan uniformemente en el eje horizontal para que cuando cambiemos el tamaño del navegador, todo se escale bien y sin consultas de medios.

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Hecho. Todo lo demás es solo una preocupación de estilo. A continuación se muestra un bolígrafo con este ejemplo. Asegúrese de ir a CodePen e intente cambiar el tamaño de sus ventanas para ver qué sucede.

CodePen Embed Fallback

Probemos otra cosa. Imagine que tenemos un elemento de navegación alineado a la derecha en la parte superior de nuestro sitio web, pero queremos que esté centrado en pantallas medianas y de una sola columna en dispositivos pequeños. Suficientemente fácil.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

CodePen Embed Fallback

¡Intentemos algo aún mejor jugando con la flexibilidad de los elementos flexibles! ¿Qué pasa con un diseño de 3 columnas primero móvil con encabezado y pie de página de ancho completo? E independiente del orden de origen.

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

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1\. header
 * 2\. article
 * 3\. aside 1
 * 4\. aside 2
 * 5\. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

CodePen Embed Fallback

Prefijo Flexbox

Flexbox requiere algunos prefijos de proveedores para admitir la mayoría de los navegadores posibles. No solo incluye propiedades antepuestas con el prefijo del proveedor, sino que en realidad hay nombres de propiedades y valores completamente diferentes. Esto se debe a que la especificación Flexbox ha cambiado con el tiempo, creando versiones "antiguas", "interpoladas" y "nuevas".

Quizás la mejor manera de manejar esto es escribir en la sintaxis nueva (y final) y ejecutar su CSS a través de Autoprefixer, que maneja los retrocesos muy bien.

Alternativamente, aquí hay un Sass @mixinpara ayudar con algunos de los prefijos, que también le da una idea de qué tipo de cosas se deben hacer:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

#css

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it’s not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what’s the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don’t need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it’s items wherever it’s suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container’s elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it’s already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

#web-development #technology #css3 #flexbox #css #html-css #learning-css #learn-flexbox-css

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css