Layout II

Flexbox

Permite que que los elementos ajusten su tamaño para ocupar todo el espacio disponible.
Permite controlar la distribución del espacio entre elementos.
Permite reordenar los elementos.
Facilita la alineación de elementos en cualquier dirección.

flex-direction

row | row-reverse | column | column-reverse
flex-wrap

nowrap | wrap | wrap-reverse
flex-flow

<flex-direction> || <flex-wrap>
justify-content

flex-start | flex-end | center | space-between | space-around
align-items

flex-start | flex-end | center | baseline | stretch
align-content

flex-start | flex-end | center | space-between | space-around | stretch

flex-direction


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

flex-wrap


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

justify-content


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

align-items


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

align-content


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

order


.item {
  order: <integer>;
}

flex-grow


.item {
  flex-grow: <number>;
}

flex-shrink


.item {
  flex-shrink: <number>;
}

flex-basis


.item {
  flex-basis: <length> | auto;
}

align-self


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

Available space = (container size - suma de flex-basis de los items)

Grow unit = (Available space / suma de flex-grow de los items)

Flex item size = (Flex basis + (Grow Unit * flex-grow))

Reproducir este menu 3 veces: