Con este tutorial de CSS Flexbox (Diseño de Caja Flexibles) aprenderás fácilmente a crear páginas web responsivas y adaptables mediante el uso de CSS.
No requiere de mucho esfuerzo, únicamente sigue los pasos que te iré indicando y aprenderás rápidamente a diseñar sitios web modernos.
Si ya tienes conocimientos de HTML y CSS3 habrás oído y usado la propiedad float
para desplazar contenedores. Pues bien con Flexbox podrás prescindir de usar float
para posicionar tus elementos a izquierda o derecha, ya que, con Flexbox
podremos posicionar y distribuir los elementos a nuestro antojo.
El modelo Flexbox tiene un contenedor padre (Flex-container) que contiene los elementos flexibles. Y un contenedor hijo (Flex-Items) que son los elementos que se encuentran dentro del contenedor padre.
Para iniciar nuestro modelo utilizaremos la propiedad display
con valor flex
, que establece un contenedor de ítems flexible en bloque, similar a block
de CSS o inline-flex
que es similar o equivalente al inline-block
de CSS .
Para que podáis entenderlo mejor, os voy a mostrar un ejemplo, en el que crearemos un div
padre cuya clase es contenedor
y varios hijos cuyas clases son elemento
:
<div class="contenedor"> <div class="elemento">1</div> <div class="elemento">2</div> <div class="elemento">3</div> <div class="elemento">4</div> </div>
Además, crearemos nuestra hoja de estilos CSS con las siguientes propiedades para iniciar nuestro modelo Flexbox y añadirles un estilo básico:
.contenedor { display: flex; width: 600px; background-color: #DDF58C; } .elemento { background-color: #67C3E6; width: 100px; height: 100px; margin: 10px; }
Los Flex-Container o contenedores Padre tienen las siguientes propiedades:
Esta propiedad nos permite establecer la dirección en la que se acomodaran nuestros elemento, es decir, modificamos la dirección del eje principal del contenedor para que se oriente en horizontal, por defecto, o en vertical.
flex-direction: row | column | row-reverse | column-reverse ;
Row: Es el valor por defecto. Alinea los elementos en fila a lo largo del eje principal en horizontal.
Column: Establece la dirección del eje principal en vertical, es decir, de arriba a abajo.
Row-reverse: Igual que ROW, pero en sentido inverso, es decir, de derecha a izquierda.
Column-reverse: Alinea en columna de arriba a abajo, pero en orden inverso a column
.
#contenedor { background: #CCC; display: flex; flex-direction: column; } .elemento{ background: #555; }
Evita o permite el desbordamiento (multilínea). Gracias a esta propiedad podremos indicar si todos los elementos estarán en línea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.
flex-wrap: no-wrap | wrap | wrap-reverse;
#contenedor { background: #CCC; display: flex; width: 200px; flex-wrap: wrap; /* Comportamiento por defecto: nowrap */} .elemento { background: #777; width: 50%; }
Es un atajo entre flex-direction
y flex-wrap
.
/* Primer valor es el valor que le daríamos a flex-direction *//* Segundo valor es el valor que le daríamos a flex-wrap */ flex-flow:row wrap;
Justify Content
Nos permite colocar los elementos de un contenedor mediante una disposición concreta a lo largo del eje principal:
justify-content: flex-end | flex-start | center | space-around | space-between ;
Aquí os dejo un esquema para que podáis entenderlo gráficamente:
Align Items (Elementos)
Se encarga de alinear los ítems en el eje secundario del contenedor, pero no debemos de confundirlo con align-content, ya que align-items actua sobre la línea actual, y no sobre cada una de las líneas de un contenedor multilínea.
align-items: flex-start | flex-end | center | stretch | baseline;
Esquema gráfico para entender el funcionamiento de align-items
baseline
se parece a flex-start
, pero con la diferencia de que la línea que posiciona los elementos es la primera línea de texto del primer elemento. Para que se note la diferencia, hemos aumentado el tamaño de la fuente del primer elemento.Align Content
Nos permite posicionar o distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap;
y los elementos se posicionan en varias lineas.
align-content: flex-start | flex-end | center | stretch | space-between | space-around ;
Esquema del funcionamiento de align-content
Ahora nos referimos a los Flex-items
, que son los que se encuentran dentro del contenedor. En primer lugar, las propiedades de estos elementos son: Order || Flex-grow || Flex-shrink || Flex-basis
.
Cómo crear un efecto LightBox solo con CSS3
Order
Establecemos el orden que tendrá un elemento a comparación con otros elementos.
.flex-item:nth-child(1){ order:1; } .flex-item:nth-child(2){ order:2; }
Flex Grow
Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.
.flex-item { flex-grow: 0; }
Flex Shrink
Número que indica el decrecimiento del ítem respecto al resto.
.flex-item { flex-shrink:0; }
Flex Basis
Establecemos el tamaño que tendrá un elemento.
Ahora que ya has finalizado y realizado todas las prácticas de este tutorial CSS Flexbox te recomiendo que trates de realizar por ti mismo diferentes ejemplos.
Si ves que no puedes, vuelve al tutorial y repite los pasos una y otra vez hasta dominar las diferentes técnicas.
Para finalizar, os recomiendo que visitéis la web Flexbox Froggy que os permitirá poner en práctica todo lo aprendido.
Déjame tus comentarios y estrellas para seguir creciendo. ¡Gracias!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios