CSS FlexBox Lab

El Html


El CSS

.box con float: left;

.flex-container corregido con .flex-container:after {...}

El mismo resultado solamente con display: flex;


flex-grow
.box {flex-grow: 1 ...} abarcan todo el ancho

.one { flex-grow: 1 ...} one abarca todo el ancho respetando el min-width de .two y .tree que es 100px

.one { flex-grow: 1 ...}
.two { flex-grow: 2 ...} one abarca una unidad de espacio, two abarca dos unidades de espacio y respetan el min-width de .tree

.one { flex-grow: 1 ...}
.two { flex-grow: 2 ...}
.tree { flex-grow: 3 ...} one abarca una unidad de espacio, two abarca dos unidades de espacio y tree abarca tres unidades de espacio aproximadamente.

4,6,2

3,2,1

flex-shrink
.one {flex-shrink: 1 ...}
.one {flex-shrink: 1 ...}
.one {flex-shrink: 1 ...}

Encogido...

Podemos observar que el contenido del div es respetado y hace que no se encoga el tercer elemento.

con datos en tercer elemento

flex-wrap
.flex-container {
flex-wrap: wrap;
...}

Corregimos el espacio no abarcado por los elementos con
.box { flex-grow: 1; ...}

Con flex-wrap: wrap-reverser; se enrollan en sentido inverso.

flex-basis

.box con win-width: 300px, pone a los div en .box con un ancho fijo, el cual al encoger la ventana, hace que aparezca el scroll bar.

Al cambiarlo a flex-basis, ya no aparecera la barra de scroll.

Ahora le aplicamos flex-basis a los tres elementos .one, .two, .tree para que tenga un ancho inicial diferente a cada uno con flex-basis. Al no tener .box flex-grow, no abarcaran todo el ancho los tres elementos.

Ahora aplicamos flex-grow a los tres elementos por medio de su contenedor .box, lo que hace que abarque todo el ancho.

Se puede compactar el código si solo indicamos flex: 1 0 200px; donde el primer parametro indica flex-grow, el segundo flex-shrink, y el tercero el ancho inicial.

fin de texto.