Estructura con CSS

flexbox

La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y su implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, así podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar.

Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aquí para saber como identificar si un recurso está actualzado o no. Echa un vistazo al artículo que escribí al respecto con lo último en sintáxis.

Hay mucho más que puedes hacer con flexbox; estos son solo unos ejemplos para que te des una idea:

Estructura Simple usando Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

¡Flexbox es muy fácil!

</section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

</div>

Estructura fantástica usando Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

Tendré 200px si hay espacio y me reduciré a 100px si no lo hay, pero nunca menos de eso.

</div>

Tendré siempre 200px, sin importar lo que pase.

</div>

Llenaré 1/3 del ancho que quede.

</div>

Llenaré 2/3 del ancho que quede.

</div>

Centrando con Flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div>

¡Finalmente es fácil centrar verticalmente con CSS!

</div>