Flex-Box


Flexbox requiere de dos cosas flex-container y flex-item.

flex-container: Simplemente es el contenedor(div).

flex-item: Son lo elementos que se encunetran dentro del contenedor (b, p, img, etc).

Display: flex;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus iusto cum laudantium animi qui ab, suscipit, voluptatem perspiciatis quo consequuntur aperiam illum impedit quasi earum, cumque sunt! Nobis, esse distinctio.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sunt quis aut aliquam ipsam, ea culpa perferendis repudiandae nobis dignissimos, numquam qui accusamus eaque nisi praesentium iure. Eaque, sequi voluptatibus. Doloremque distinctio quaerat perferendis quisquam necessitatibus sapiente autem non obcaecati quia sequi vero nihil, cupiditate placeat delectus fuga tempora! Labore id voluptatibus consequatur aliquid temporibus nisi animi voluptatum alias sapiente. Nihil beatae tempore fugit provident corporis, dolore asperiores amet vitae laudantium laboriosam quis libero suscipit placeat dignissimos similique possimus rem odit inventore commodi nemo harum. Quod vitae placeat architecto illo?

Propiedades: (contenedor)


flex-direction: [row, column, row-reverse, column-reverse]

1
2
3
4
5
6

flex-wrap: [wrap, nowrap];

ESta propiedad lo que hace es que al hacer mas chica la pantalla los elementos se bakan uno por uno sin perder su tamaño.

1
2
3
4
5
6

Flex-Flow

Flex-flow se puede utilizar para abreviar flex-direction & flex-wrap:

.flex-flow{
display: flex;
flex-flow: row-reverse wrap;
}
1
2
3
4
5
6

Justify-Content

Justify-Content sirve para centrar los elementos(items) del contenedor. el valor space-around esta muy bueno para esparcir las cajas de manera que todas tengan el mismo espacio de separacion como en el siguiente ejemplo y agregar flex-wrap: wrap; para que a la hora de hacerlo más pequeño este no se deforme

1
2
3
4
5
6

Align-Item & align-content

align-item: se utiliza para cuando solo hay una linea de items

align-content: se utiliza para cuando solo hay mas de una linea de items

Ejemplo align-item

1
2
3
4
5
6
7

propiedades: (items)

align-self

align-self: [flex-start, flex-end, center, baseline, stretch]
sirve para poscionoar un solo elemento(item)

1
2
3
4
5
6

flex-grow:

Agarra el espacio sobrante y lo reparte entre los elementos

1
2
3

flex-basis:

Establece la longitud inicial del elemento (item) y tiene un nivel mayor al de width

Esta caja tiene un flex-baisis de 300px
Esta caja tiene un width de 130 px
Esta caja tiene un width de 130 px

flex-Shrink:

El elemento que tiene esta propiedad sede máyor espacio que las otras.

Esta caja va a seder la mitad de su espacio
Esta caja tiene un width de 130 px
Esta caja tiene un width de 130 px

Flex

Lo que hace flex es integrar flex-grow, flex-basis, flex-shrink

Ejemplo:

Ejemplo