Flexbox es bastante impresionante y ciertamente es parte del futuro del diseño. La sintaxis ha cambiado bastante en los últimos años, de ahí la sintaxis “antigua” y “nueva”. Pero si unimos las sintaxis antigua, nueva e intermedia, podemos obtener un soporte de navegador decente. Especialmente para un caso de uso simple y probablemente el más común: cuadrículas controladas por orden
El HTML
Un contenedor semánticamente sin sentido recorre las tres áreas principales y establecerá el contexto de flexbox. Cada una de las áreas está semánticamente marcada y se convertirá en columnas.
<div class="page-wrap">
<section class="main-content" role="main">
Main content: first in source order
</section>
<nav class="main-nav" role="navigation">
Links
</nav>
<aside class="main-sidebar" role="complementary">
Sidebar
</aside>
</div>El resultado final se ve así:
Contexto de Flexbox
Necesitamos hacer que el contenedor de nuestras columnas sea un contexto de visualización de caja flexible. Con solo hacer esto, todos los hijos directos de este elemento se convierten en elementos flexibles. No importa lo que fueran antes, ahora son elementos flexibles.
De inmediato tenemos que unir las sintaxis antigua, nueva y tweener. El orden es importante aquí. Dado que la propiedad de visualización en sí no tiene un prefijo, debemos asegurarnos de no anular las sintaxis más nuevas con sintaxis más antiguas para los navegadores que aún (y probablemente siempre lo harán) admitirán ambas.
.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}Controlar el ancho de las columnas
Nuestro objetivo aquí es una cuadrícula de 20% / 60% / 20%.
El paso 1 es establecer nuestro contenido principal al 60%.
El paso 2 es configurar las barras laterales exteriores para llenar el espacio restante por igual.
Una vez más, necesitamos entretejer sintaxis antiguas, nuevas y nuevas.
.main-content {
width: 60%;
}
.main-nav,
.main-sidebar {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}En la nueva sintaxis, establecer el ancho de las barras laterales no es necesario, ya que llenará el 40% restante por igual, lo que las convertirá en un 20%. Pero encontré que no configurarlo causaba que el ancho colapsara con las sintaxis antiguas.
Reordenamiento de columnas
Queremos que el contenido principal aparezca visualmente en el medio, pero que sea el primero en el orden de origen. Fácil y cursi en flexbox, pero, por supuesto, tenemos que unir las sintaxis nueva, antigua y tweener.
.main-content {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.main-sidebar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}Soporte del navegador
Si haces todo este tejido, puedes obtener:
- Chrome cualquiera
- Firefox cualquiera
- Safari cualquiera
- Opera 12.1+
- IE 10+
- iOS cualquiera
- Android cualquiera
El mayor factor limitante, por supuesto, es IE, pero por lo demás es bastante bueno. Si está haciendo una versión específica para dispositivos móviles de un sitio, está en mejor forma. Si alguien puede probarlo en Windows Phone, dímelo.
Firefox 19: tiene algunos errores y tendrás que vigilarlo. Por ejemplo, en esta demostración no pude encontrar una manera de forzar las barras laterales a ser realmente del 20%. El simplemente colapsa al ancho del contenido en el interior, que es un poco arbitrario ya que es texto. Yo tambien necesitaba -moz-box-flex: 1; en el contenido principal (60%), de lo contrario, sería tan ancho como el párrafo más ancho como si hubiera white-space: nowrap, que es simplemente inexplicable para mí.
Manifestación
En CodePen:
¿Necesita más detalles sobre Flexbox?
Consulte nuestra guía completa.