Flex snippets. Keywords: flex, flexbox, flex grid, flex snippets, flex autosize, flex fijo, flex 100%, flex full width, flex width 100%, flex fixed size, flex tamaño fijo

Flex.md

Índice

• Intro.
• Flex automático.
• Flex fijo.

Intro

Múltiples snippets sobre flex y sus usos.

Flex automático

Cambiando la propiedad flex-direction puedes cambiar la orientación de vertical a horizontal. Sus valores son column (vertical) o row (horizontal).

<div class="container">
  <div class="auto-size">Auto</div>
  <div class="auto-size">Auto</div>
  <div class="auto-size">Auto</div>
</div>

.container {
  display:flex;
}

.auto-size {
  border: 1px solid black;
  flex: 1 1 auto;
}

Explicación

• flex: es flex-property un "shorthand" o atajo para aplicar varias propiedades a la vez.
• 1: es flex-grow que indica lo que crecerá el elemento. Por defecto es 0.
• 1: es flex-shrink que indica lo que decrecerá el elemento. Por defecto es 1.
• auto: es flex-basis que indica el tamaño base del elemento. Por defecto es auto.

Ejemplo CodePen

Flex ancho fijo

Cambiando la propiedad flex-direction puedes cambiar la orientación de vertical a horizontal. Sus valores son column (vertical) o row (horizontal).

<div class="container">
  <div class="fixed-size">50%</div>
  <div class="fixed-size">50%</div>
</div>

.container {
  display:flex;
}

.fixed-size {
  border: 1px solid black;
  flex: 1 1 50%;
}

Ejemplo CodePen

Explicación

• flex: es flex-property un "shorthand" o atajo para aplicar varias propiedades a la vez.
• 1: es flex-grow que indica lo que crecerá el elemento. Por defecto es 0.
• 1: es flex-shrink que indica lo que decrecerá el elemento. Por defecto es 1.
• auto: es flex-basis que indica el tamaño base del elemento. Por defecto es auto.