Dos Columnas Iguales
para lograr dos columnas con flexblox, se realiza el siguiente procedimiento.
El codigo se debe de implementar desde el elemento padre, por ejemplo:
Codigo en HTML
codigo CSS
El elemento
muestra por default todos los elementos de izquierda a derecha
con el elemento
permite distribuir el contenido horizontalmente.
con el elemento
le indicamos el tamaño y la separación que va tomar.
una alternativa es utiliar el elemento
O se puede utilizar directamente
en el elemento padre, pero la desventaje es que no tiene soporte en todos los navegadores, al ser mas
nueva.
Tres Columnas Iguales
Este ejemplo es similar al anterior, entonces aplicando lo anterior tenemos que:
Codigo en HTML
codigo CSS
Alternativa
el elemeneto nos
ahorra codigo, pero al no tener un soporte total, utilizamos el codigo anterior
Tres Columnas Iguales (uno mas grande)
Con FlexBox podemos lograr columnas de tamaños diferentes
Codigo HTML
Codigo CSS
Al Hijo principal
le estamos indicando que tome la mayor cantidad de espacio en pantalla y le reste un 1rem
para la separación con el valor la propiedad
Y con el selector
le estamos indicando que tome un tamaño menor en pantalla, por cada hijo al que le asignamos
este selector
Con el selector especifico
le estamos diciendo que con la propiedad tome
la primera columna en el espacio en pantalla
Column drop
También se le conoce como colocación de columnas, va cambiando de acuerdo al espacio disponible
Suponiendo que tenemos el espacio de un disposito pequeño tenemos la siguiente distribución:
Primer Columna
Segunda Columna
Tercera Columna
Pero si tuvieramos más espacio disponible, suponiendo una computadora, las columnas se irían recolocando, se adapataría para obtener algo como lo siguiente:
Primer Columna
Segunda Columna
Tercera Columna
Codigo HTML
Codigo CSS
En la distribución de 480px le estamos diciendo que los dos primeros elementos tomen el 50% con
y que el tercer elemento se recorra
con ya
que los dos primeros ocupan el 100% de la pantalla
en la distribucón de 768px, estamos creando 3 columnas que sumando su porcentaje de el 100% con
Side Bar
Sidebar es mayormente utilizado en blogs, o tiendas virtuales, cuenta con area con un tamaño mas grande y una barra lateral de menor tamaño
Codigo HTML
Codigo CSS
con la propiedad le
estamos diciendo entonces al selector que:
layout Shifter
Puede cambiar su orden y la ubicación de todos los elementos
Se puede traducir como cambio de diseño, ya que los elementos secundarios los puede convertir en principales y viceversa
Suponiendo que tenemos un contenido ordenado:
Podriamos lograr algo como:
Codigo HTML
Codigo CSS
Media Querie de 768px
Visualiza como la primera columna se posiciona en la ultima al expandir la pantalla, se logra
con
A
le creamos un subflexbox para que afecte a sus hijos directamente con
la cual que cada elemento este dentro de ella toma el 50% del espacio con 2rem de separación
en dicha media querie
Media Querie de 992px
En esta distribución vamos a regresarle la dirección de posicionamiento por default a
flexblox con
Para ordenar los elementos en la posicion que deseemos podemos utilizar la propiedad de en
el elemento que deseamos ordenar, enetre mas alto el numero
se va acomodar mas al final, y entre mas bajo se acomodara primero, de acuerdo a los
elementos que tengamos
Con le
estamos indicando el tamaño que van a tomar los contenedores
tiene mas espacio en pantalla asignado
con una separacion de 2 rem, a diferencia de que
estará tomando un espacio menor
Con
le estamos diciendo que cuando llegue al limite de espacio, se vayan colocando hacia abajo,
para evitar el sobreposicionamiento ya que a los subhijos de le
estamos diciendo que con tomen
cada elemento el espacio total disponible, de lo contrario sin wrap se sobreposicionarian