logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Diseño (Layout)
  • Flex Box
  • Propiedades: Flex container

Propiedades: Flex container

Algunos diseñadores piensan que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es, por tanto, más sencillo, y los diseños complicados pueden crearse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Otros piensan que, de momento, se debe utilizar el modelo de "bloques" para diseños complejos y el de "cajas flexibles" para diseños más livianos.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos y ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Cuando utilizamos la propiedad display: flex con un elemento HTML automáticamente dicho elemento se convierte en el contenedor padre (flex contaniner), y los elementos HTML que estén dentro de él se convierten en los elementos hijos (flex items). Es decir, se crea un entorno flexible.

Como decimos, los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.

Por defecto, el eje principal (main axis) es el horizontal y el eje secundario (cross axis) es el vertical. Esto puede cambiar y ser al revés si utilizamos la propiedad flex-direction: column; de forma que, a partir de este momento, el eje principal sería el vertical y el eje secundario seria el horizontal.

Observación: la propiedad flex no se hereda en CSS3, por tanto podemos definir tantos elementos container (anidados o no) como queramos.

flex box 1

Propiedades del contenedor PADRE (flex container)

Propiedad / ValoresDescripción
display: flex
flex | inline-flex ;
.contenedor {
    display: flex;
}
Si su valor es flex o inline-flex, la propiedad display define un contenedor padre o contexto FlexBox  (flex container).
flex-direction
row | row-reverse | column | column-reverse;
.contenedor { 
    flex-direction: row; 
}

Establece la dirección del eje principal (main) y por tanto la dirección de los elementos flex.
Valor por defecto:  row (fila)

flex-wrap
nowrap | wrap | wrap-reverse;
.contenedor {
    flex-wrap: wrap;
}
Especifica si puede haber un cambio de línea (wrap) o no (nowrap).
Valor por defecto:  nowrap
flex-flow
flex-direction [flex-wrap]
.contenedor { 
    flex-flow: row nowrap; 
}
Es una forma abreviada (shorthand) para las propiedades flex-direction y flex-wrap.
Valor por defecto:  row nowrap
align-items
flex-start | flex-end | center | baseline | stretch;
.contenedor {
    align-items: flex-start;
}
Alinea los elementos del contenedor flex en el eje secundario (cross).
Valor por defecto:  stretch
justify-content
flex-start | flex-end | center | space-between | space-around;
.contenedor {
   justify-content:flex-start; 
}
Alinea los elementos del contenedor flex en el eje principal (main), evidentemente cuando no ocupan todo el espacio.
Valor por defecto:  flex-start
align-content
flex-start | flex-end | center | space-between | space-around | stretch;
.contenedor {
    align-content: flex-start;
}

Esta propiedad sólo se aplica cuando hay más de una línea (es decir, cuando la propiedad flex-wrap es wrap y los elementos no caben en una sola línea)

Alinea los elementos del contenedor flex cuando los elementos ocupan más de una línea y no utilizan todo el espacio disponible en el eje secundario (cross).
Valor por defecto:  stretch

  • Anterior
  • Siguiente

Layout

  • Qué es el Layout
  • -- Qué es Grid Layout
  • Propiedades: Grid container
  • Propiedades: Grid Items
  • -- Qué es CSS FlexBox
  • Propiedades: Flex container
  • Propiedades: Flex Items
  • -- Qué es Media querie
  • Ejemplos responsive

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 13

Ayer ... 32

Week 158

Mes ... 964

TOTAL ... 44389

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS