¿Algún tutorial actualizado para el módulo flexbox?

Question

Sé que la especificación Flexible Box Layout module ha cambiado, y algunos navegadores ahora implementan más de una versión (con diferentes sintaxis). He estado buscando información, pero solo puedo encontrar tutoriales con advertencias de que ahora están desactualizados.

Sé que la especificación podría cambiar de nuevo, pero tengo un caso de uso inusual (una extensión de Chrome) y quiero usarlo en su forma actual. Solo quiero saber cómo usar la última versión implementada en Chrome.

¿Alguien sabe de un tutorial actualizado?

Answer 1

Aquí está el mejor flexbox tutorial que he encontrado hasta ahora, está muy bien explicado o si necesita una explicación más detallada, consulte el w3c draft.

Y para probar y comprender mejor el modelo de flexbox, consulte flexbox playground.

Answer 2

Los módulos Flexbox aún no están desactualizados. La implementación del nuevo modelo llevará tiempo, probablemente un año para implementarse.

W3C siempre tiene la documentación para los estándares y también notas de cosas que pueden no implementarse o no.

Aquí está el actual Flexbox Layout Module.

Aquí está el borrador del editor de la nueva especificación Flexbox Layout Module 2012.

Answer 3

Cortesía de html5please.com, parece que las especificaciones de Flexbox se consideran estables y hay tutoriales en Opera y Mozilla.

Nota No estoy seguro de por qué html5please todavía recomienda evitarlo. Su texto parece sugerir lo contrario.

Answer 4

Como la implementación ha cambiado en el pasado, hay dos implementaciones principales conocidas de flexbox. This page proporciona información básica sobre la implementación anterior y la nueva.

Encontré un buen tutorial para el estado actual de la implementación de Flexbox here.

código HTML Ejemplo de estructura de una página (demo on Codepen here):

<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> 

para dividir el page-wrap en 3 piezas con el main-nav doble de grande que las barras laterales, podríamos utilizar FlexBox. Otra ventaja es que la posición del elemento main-content en el DOM está antes del main-nav pero con flexbox podríamos renderizarlo antes del contenido. Esto es útil para los lectores de pantalla, por lo que el contenido se lee primero.

Necesitamos hacer del page-wrap un contexto de caja flexible. De esta forma, todos los niños se convierten en elementos Flexbox:

.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+ */ 
} 

El orden de las propiedades es importante. Debido a que algunos navegadores son compatibles con ambas implementaciones, debemos especificar las propiedades más recientes debajo de las propiedades anteriores. Esto se debe a que display -property no tiene el prefijo.

Para añadir las anchuras de los elementos:

.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+ */ 
} 

La última cosa que necesitamos hacer es cambiar el orden de los artículos, porque ahora el main-nav se rinde después de la main-content

.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; 
}