Construye una página web con CSS3 Flexbox

Ayer discutimos el futuro del diseño CSS y algunos de los nuevos módulos que CSS3 trae a la mesa en este campo. Uno de estos que mencionamos brevemente fue CSS3 Flexbox.

Hoy profundizaremos en este modelo y construiremos una página web completa con él. De ninguna manera estará listo para implementarse en sus proyectos, pero le brindará más información sobre una posible forma en que codificaremos los sitios web en los próximos años. Además, ¡esto es simplemente divertido para jugar!

Altamente Experimental: Solo Webkit

Mi objetivo para esta publicación era tener una página de trabajo en funcionamiento en varios navegadores, eso no sucedió. En este punto, la implementación es defectuosa e incoherente en todos los navegadores, incluso después de instalar Flexie.js, aún obtenía resultados muy diferentes entre Firefox y Safari (creo que tiene que ver con mezclar contenedores típicos centrados en los márgenes y Flexbox).

Por esta razón, el proyecto de hoy estará dirigido principalmente a Safari y Chrome porque, francamente, sigue siendo un desastre en otros navegadores! Definitivamente, te animo a que sigas y luego juegues con el producto terminado para ver si puedes ponerlo en funcionamiento en una implementación de varios navegadores. Si tienes sugerencias, me encantaría escucharlas en los comentarios!

Paso 1: Clases reutilizables

Ya que expliqué brevemente el concepto básico de Flexbox en la publicación de ayer, me centraré en la implementación aquí. Pero no te preocupes, deberías entender la esencia a medida que avanzamos.

Lo primero que queremos hacer es crear algunas clases básicas que ayudarán a definir nuestro diseño. Estos atributos se pueden aplicar a una ID según sea necesario, pero me parece útil y ordenado hacerlo de esta manera.

.hasflex {display: box; pantalla: -webkit-box; pantalla: -moczona; } .box0 {-webkit-box-flex: 0; -moz-box-flex: 0; caja-flex: 0; } .box1 {-webkit-box-flex: 1; -moz-box-flex: 1; caja-flex: 1; } .box2 {-webkit-box-flex: 2; -moz-box-flex: 2; caja-flex: 2; } .box3 {-webkit-box-flex: 3; -moz-box-flex: 3; caja-flex: 3; } .last {margen derecho: 0; }

Vamos a discutir cómo funcionan estas clases. La primera clase, hasflex, se aplicará a un contenedor principal cuyos hijos queremos distribuir utilizando este nuevo sistema Flexbox. Una cosa que notará es que todo este diseño será completamente sin flotadores, por lo que le dará algunas buenas indicaciones sobre dónde implementaremos Flexbox en nuestro código.

A continuación, configuramos algunas clases más para aplicar varios box-flex valores. Flexbox distribuirá convenientemente nuestros elementos secundarios a través del contenedor y estos definirán las proporciones. yo creer que el valor por defecto es? 0? pero los resultados parecían un poco defectuosos con este supuesto, por lo que me resultó útil aplicar siempre un valor de forma manual.

Paso 2: HTML inicial y CSS

Para comenzar su documento HTML, cree un contenedor y un encabezado. En este punto, estos son elementos básicos que construiremos como siempre sin la ayuda de Flexbox.

<h1>Diseño Shack Flexbox Demo</h1>

Una vez que tenga eso en su lugar, agregue los estilos básicos a continuación. Básicamente, instalé un cuerpo oscuro con un contenedor ligero de 1.000 px de ancho que contendrá todo nuestro contenido. Agregue algunos márgenes al centro y algunos estilos de texto básicos, y estamos listos para pasar a lo divertido.

Nota: La fuente principal que usaré es Oswald, de Google Fonts.

/ * Reinicio básico * / * {relleno: 0; margen: 0; } / * Body / Container * / body {font-family: helvetica, arial, sans-serif; tamaño de fuente: 15px; línea de altura: 23px; fondo: # 111; color: # 222; } #container {width: 1000px; margen: 0 auto; fondo: #eee; min-height: 1150px; } / * Header * / #header {margin: 0 auto; ancho: 900px; acolchado superior: 20px; Familia tipográfica: 'Oswald', arial, serif; }

Paso 3: Navegación

Ahora, para el área de navegación, normalmente creas una lista de enlaces y luego los flotas hacia la izquierda. Con Flexbox, el proceso es un poco diferente. Aquí simplemente aplicamos el hasflex clase que creamos anteriormente y luego usar caja0 para cada uno de los elementos de la lista. Aplicando caja0 Para los tres, el efecto es flotar los enlaces a la izquierda pero no los distribuirá en todo el ancho del contenedor.

<ul> <li>Casa</li> <li>Acerca de</li> <li>Contacto</li> </ul>

Después de esto, simplemente aplicamos los mismos tipos de estilos que aplicaríamos a cualquier otra página web. El objetivo principal aquí es espaciar los enlaces un poco con algunos márgenes y asegurarse de que nuestros enlaces tengan el estilo adecuado.

/ * Navegación * / #nav {ancho: 900 px; / * fondo: #eee; * / margin: 0 auto; } #nav ul {estilo de lista: ninguno; } #nav ul li {margen: 20px 20px 0 0px; } #nav a {text-decoration: none; color: # 111; } #nav a: hover {text-decoration: underline; color: # 666; }

Paso 4: La Imagen

Toda buena página web necesita una imagen. Para ilustrar con más detalle cómo aplica Flexbox de forma selectiva solo a los elementos que lo necesitan, lanzaremos una imagen de encabezado grande con el mismo código exacto que normalmente.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-web-page-with-css3-flexbox_4.jpg"> <p>Aquí es donde realmente brilla Flexbox. Normalmente, crear un diseño de tres columnas como el que se muestra arriba implicaría una buena cantidad de planificación matemática. No solo deberíamos dividir el contenedor principal en tres, sino también determinar las proporciones adecuadas para que la columna central sea más ancha que las otras dos.</p> <p>Sin embargo, con Flexbox, todo lo que tenemos que hacer es aplicar nuestros <em>flexbox</em> clase en conjunto con las clases de caja numerada. Aquí pongo el div medio a <em>caja2</em> y los otros a <em>caja3</em>. Como puede ver en la imagen de arriba, el efecto de esto es una distribución automática de las columnas, siendo la segunda más ancha que la primera.</p> <p>Curiosamente, todo lo que leí me hizo creer que el <em>caja2</em> La clase sería la más estrecha en este caso, ¡pero ese no fue el caso en mis pruebas en vivo! Esta configuración produce un primer y último párrafo estrecho y un segundo párrafo ancho.</p> <textarea wrap="soft" readonly=""> <h2>Uno</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Dos largos</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Tres</h2> <p>Lorem ipsum dolor sit amet? </p>

Combine esto con algunos CSS básicos y obtendrá un diseño de tres columnas rápido y fácil. Como Flexbox se encarga automáticamente de la distribución relativa al ancho principal, cualquier cambio que realicemos en el principal se reflejará automáticamente en los secundarios.

/ * Columnas de texto: 3 Anchas * / #columns {ancho: 900 px; / * fondo: gris; * / margen: 10px auto; } #columns p {margin: 0 15px 0 0px; } #columns h2 {margen: 0 30px 0 0px; línea de altura: 35px; Familia tipográfica: 'Oswald', arial, serif; }

Una cosa fascinante de Flexbox es que en realidad podríamos reordenar las columnas que configuramos usando CSS puro. Asignando -webkit-box-ordinal-group: (un número); A cada elemento le da control sobre el orden de su aparición.

Paso 6: Pila vertical

Es importante saber que no tiene que usar columnas verticales cuando trabaja con Flexbox. Podemos usar la misma técnica anterior para apilar unos cuantos párrafos uno encima del otro. Si realmente entras en Flexbox, esta técnica se puede usar para mezclar elementos apilados vertical y horizontalmente, pero aquí lo mantendremos básico solo para ver cómo funciona.

<h2>Dos largos</h2> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p>

La principal diferencia aquí es que hemos establecido caja orientada a vertical, lo que nos da la pila vertical que se muestra en la imagen de arriba en lugar de las columnas que creamos en el paso anterior.

/ * Filas de texto * / #rows {width: 900px; / * fondo: gris; * / margin: 30px auto 15px; -webkit-box-orient: vertical; -moz-box-orient: vertical; caja-orientación: vertical; } #rows p {margin: 0 0px 15px 0px; } #rows h2 {line-height: 35px; Familia tipográfica: 'Oswald', arial, serif; }

Paso 7: Dos columnas

Solo para cambiar las cosas una última vez, vamos a crear otra sección, esta vez con dos columnas en lugar de tres. El principio es exactamente el mismo. No tiene que repensar el diseño porque esta vez tiene dos columnas, Flexbox se ocupa de todo el trabajo pesado una vez más.

<h2>Uno</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Dos</h2> <p>Lorem ipsum dolor sit amet? </p> / * twoColums * / #twoColums {width: 900px; margen: 0px auto; } #twoColums p {margin: 0 20px 0 0; } #twoColums h2 {line-height: 35px; Familia tipográfica: 'Oswald', arial, serif; }

Producto terminado

Echa un vistazo a una demostración en vivo si estás en Safari o Chrome.

Ir más lejos

Intenté intencionalmente mantener este ejemplo lo más simple posible. Sin embargo, puede tomar este diseño con bastante facilidad y hacerlo aún más complejo. Para empezar, usar porcentajes de ancho le dará un diseño agradable y verdaderamente flexible. Además, como mencioné anteriormente, puede realizar acciones complejas como reorganizar columnas y mezclar pilas verticales y horizontales en la misma fila. Te animo a jugar con el código tanto como sea posible usando esta página como guía.

Conclusión

Este ejemplo básico pretende arrojar más luz sobre cómo podríamos utilizar Flexbox para crear diseños simples y complejos en el futuro. Soy bastante nuevo en el módulo así que esto es lejos de perfecto, como lo demuestra el hecho de que aún no es compatible con varios navegadores!

A pesar de sus desventajas, debe tener un conocimiento sólido de cómo funciona el módulo y de lo que se puede hacer con una cantidad relativamente pequeña de código al aprovechar Flexbox. ¡Siéntase libre de lanzar un montón de sugerencias en los comentarios!