No es necesario entender cada Aspecto de Flexbox antes de que puedas saltar y comenzar. En este tutorial, presentaremos algunas características de Flexbox mientras diseñamos un "diseño de noticias" como el que puedes encontrar en The Guardian.
La razón por la que estamos utilizando Flexbox es que proporciona características muy potentes:
Podemos hacer fácilmente columnas sensibles.
Podemos hacer columnas de igual altura.
podemos empujar contenido a la fondo de un contenedor
Entonces empecemos!
1. Comience con dos columnas
Crear columnas en CSS siempre ha sido un desafío. Durante mucho tiempo, las únicas opciones fueron usar flotadores o tablas, pero ambos tenían sus propios problemas..
Flexbox facilita el proceso, dándonos:
código limpiador: solo necesitamos un contenedor con pantalla: flex
no hay necesidad de claro Flota, evitando comportamientos inesperados
marcado semántico
flexibilidad: podemos cambiar el tamaño, estirar, alinear las columnas en unas pocas líneas de CSS
Empecemos por hacer dos columnas; uno que es 2/3 del ancho de nuestro contenedor, y uno que es 1/3.
Columna 2/3
1/3 columna
Aquí hay dos elementos:
la columnas envase
dos columna niños, uno con una clase adicional de columna principal el cual usaremos para ampliarlo
Como la columna principal tiene un valor flexible de 2, ocupará el doble de espacio que la otra columna.
Al agregar algunos estilos visuales adicionales, esto es lo que obtenemos:
2. Haz de cada columna un contenedor de Flexbox
Cada una de estas dos columnas contendrá varios artículos apilados verticalmente, por lo que vamos a convertir el columna elementos en contenedores Flexbox también. Queremos:
Los artículos a apilar verticalmente.
los artículos a tramo y llena el espacio disponible
.columna pantalla: flexión; dirección flexible: columna; / * Hace que los artículos se apilen verticalmente * / .article flex: 1; / * Estira los artículos para llenar el espacio restante * /
los dirección flexible: columna gobernar en el envase, combinado con el flex: 1 gobernar en el niños asegura que los artículos llenarán todo el espacio vertical, manteniendo nuestras primeras dos columnas de la misma altura.
3. Haz de cada artículo un contenedor de Flexbox
Ahora, para darnos un control adicional, vamos a convertir cada artículo en un contenedor de Flexbox también. Cada uno de ellos contendrá:
un título
un párrafo
Una barra de información con el autor y el número de comentarios.
una imagen de respuesta opcional
Estamos utilizando Flexbox aquí para "empujar" la barra de información hacia abajo. Como recordatorio, este es el diseño del artículo que buscamos:
Aquí está el código:
.artículo display: flex; dirección flexible: columna; base flexible: auto; / * establece el tamaño inicial del elemento en función de su contenido * / .article-body display: flex; flex: 1; dirección flexible: columna; .article-content flex: 1; / * Esto hará que el contenido llene el espacio restante y, por lo tanto, empuje la barra de información en la parte inferior * /
Los elementos del artículo están dispuestos verticalmente gracias a la dirección flexible: columna; regla.
Aplicamos flex: 1 al contenido del articulo elemento para que llene el espacio vacío, y "empuja" el información del artículo Al fondo, sin importar la altura de las columnas..
4. Añadir algunas columnas anidadas
En la columna de la izquierda, lo que realmente queremos es otro set de columnas. Así que vamos a reemplazar el segundo artículo con el mismo columnas contenedor que ya hemos utilizado.
Como queremos que la primera columna anidada sea más ancha, estamos agregando un columna anidada clase con el estilo adicional:
.columna anidada flex: 2;
Esto hará que nuestra nueva columna sea dos veces más ancha que la otra..
5. Dar el primer artículo a Diseño horizontal
El primer artículo es realmente grande. Para optimizar el uso del espacio, cambiemos su diseño a horizontal.
los orden La propiedad es muy útil aquí, ya que nos permite alterar el orden de los elementos HTML sin afectar el marcado HTML. los artículo-imagen en realidad viene antes de la articulo-cuerpo en el marcado, pero se comportará como si viniera después.
6. Haga que el diseño responda
Todo esto se ve como queremos, aunque está un poco aplastado. Vamos a arreglar eso yendo responsivo.
Una gran característica de Flexbox es que solo necesita quitar el pantalla: flex gobierne en el contenedor para deshabilitar Flexbox por completo, manteniendo todas las demás propiedades de Flexbox (como alinear elementos o flexionar) válido.
Como resultado, puede activar un diseño "sensible" habilitando solo Flexbox encima un cierto punto de quiebre.
Vamos a eliminar pantalla: flex tanto de la .columnas y .columna selectores, en lugar de envolverlos en una consulta de medios:
@media screen y (min-width: 800px) .columns, .column display: flex;
¡Eso es! En pantallas más pequeñas, todos los artículos estarán uno encima del otro. Por encima de 800px, se distribuirán en dos columnas..
7. Añadir toques finales
Para hacer que el diseño sea más atractivo en pantallas más grandes, agreguemos algunos ajustes de CSS:
El primer artículo tiene su contenido dispuesto horizontalmente, con el texto a la izquierda y la imagen a la derecha. Además, la columna principal ahora es más ancha (75%) y la columna anidada también (66%). Aquí está el resultado final!
Conclusión
¡Espero haberte mostrado que no necesitas entender todos los aspectos de Flexbox para saltar y comenzar a usarlo! Este diseño de noticias sensible es un patrón realmente útil; sepárelo, juegue con él, háganos saber cómo le va!
Share
Lo que vas a crear
Accentsconagua
