What is Flexbox and how to use it
Flexbox, or Flexible Box Layout, is a CSS layout model that provides an efficient way to distribute elements within a container and dynamically align them.
Previously, developers had limited options, such as using ‘float’, which were not cross-browser compatible and difficult to scale to accommodate different screen resolutions. Flexbox overcomes these limitations by offering a set of properties and values that allow for vertical and horizontal centering of blocks, while also ensuring that all columns within a container have the same height, regardless of the amount of content they contain.
Prerequisites
To fully understand this post, it’s not necessary to be an expert in HTML and CSS, but it is important to have basic knowledge of how these technologies work.
What are we going to see
First, we will examine how rows and columns work to learn how to distribute objects within them. Then, we will review how to use the `justify-content` and `align-items` properties to position a button inside its container and effectively center it. Subsequently, we will delve into the use of `flex-direction` and `flex-wrap` to understand how to work with rows and columns, thus building a flexible grid system.
Once these concepts are mastered, we will see a practical example of how to apply Flexbox in a landing page, implementing a menu and a small grid. We will use all the techniques learned earlier to achieve an efficient and adaptable design.
Rows and columns
In Flexbox, the row
and column
properties allow us to determine the direction in which the elements of a container will align. To better understand this example, we’ll use the following HTML and CSS:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles-3.css">
<title>Introducción a Flexbox</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
}
.box {
padding: 12px 26px;
border-radius: 10px;
background: linear-gradient(148deg,#bf3a70 29%,#e75f58 71%);
color: white;
aspect-ratio: 1/1;
margin: 5px;
max-width: 20px;
}
Row
This is the default way of flex. Using this property, the elements are distributed horizontally:
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
flex-direction: row;
}
Column
This way the content is distributed horizontaly:
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
flex-direction: column;
}
Positioning an element inside its container
We will star with an html and CSS code for this example:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles-2.css">
<title>Introducción a Flexbox</title>
</head>
<body>
<div class="container">
<div class="box">
Texto 1
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 400px;
height: 400px;
display: flex;
}
.box {
padding: 22px;
border-radius: 10px;
width: 160px;
height: 60px;
text-align: center;
background: linear-gradient(148deg,#bf3a70 29%,#e75f58 71%);
color: white;
}
justify-content
This method allows us to align one block horizontaly depending on the width of our father element, in this case “.container”.
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 400px;
height: 400px;
display: flex;
justify-content: /* start, center o end */;
}
align-items
This other method allows us to align this object in a vertical form:
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 400px;
height: 400px;
display: flex;
align-items: /* start, center o end */;
}
Center an element within its container
The two functions we just explored make centering a div simple and, most importantly, ensure that the element remains centered across all resolutions and in all browsers. To achieve this, we just need to use the following code:
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
Space-between, space-around and space-evenly
As we’ve mentioned before, justify-content gives us precise control over the distribution of elements. Now let’s see how to distribute space between multiple elements within a container. For this, we’ll use the example of a menu. Let’s start with this code:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles-3.css">
<title>Introducción a Flexbox</title>
</head>
<body>
<div class="container">
<div class="box">Home</div>
<div class="box">Quiénes somos</div>
<div class="box">Actividad</div>
<div class="box">Proyectos</div>
<div class="box">Blog</div>
<div class="box">Contacto</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
}
.box {
padding: 12px 26px;
border-radius: 10px;
background: linear-gradient(148deg,#bf3a70 29%,#e75f58 71%);
color: white;
}
We should now have something that looks like this:
space-between
This way, Flexbox will evenly distribute space among all elements in the container, resulting in the first and last elements being aligned with the edges, and the intermediate elements being equally spaced apart. This technique is particularly useful when aiming to make the most of the available space within a container.
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
justify-content: space-between;
}
space-around
The `space-around` value evenly distributes the elements along the main axis and leaves equal space at each end of the container. This feature enhances readability and the aesthetics of the design by providing a breathable margin between the elements and the container’s edges, contributing to a more balanced layout.
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
justify-content: space-around;
}
space-evenly
Finally, with `space-evenly`, we achieve equal spacing between all elements, including the ends. Thanks to this, we achieve a more symmetrical layout.
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
Examples of its use in a landing page
After reviewing everything we’ve seen so far, we can efficiently create layouts. For instance, using the following code, we could develop a basic layout for a webpage:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Introducción a Flexbox</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<img src="logo.svg" alt="Logo" class="navbar-logo">
<ul class="navbar-nav">
<a href="#" class="nav-link">Inicio</a>
<a href="#" class="nav-link">Actividad</a>
<a href="#" class="nav-link">Blog</a>
<a href="#" class="nav-link">Contacto</a>
</ul>
</nav>
<div class="card-wrapper">
<h2 class="title">Nuestras especialidades</h2>
<div class="last-cards">
<div class="card">
<img src="post.jpeg" alt="Card 1" class="card-img">
<h3>SEO</h3>
</div>
<div class="card">
<img src="post.jpeg" alt="Card 2" class="card-img">
<h3>SEM</h3>
</div>
<div class="card">
<img src="post.jpeg" alt="Card 3" class="card-img">
<h3>Analytics</h3>
</div>
<div class="card">
<img src="post.jpeg" alt="Card 4" class="card-img">
<h3>Desarrollo Web</h3>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/* Generales */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #f3f3f3;
}
h2.title {
display: block;
margin: 0 auto 22px auto;
width: fit-content;
}
.container {
padding: 22px;
border-radius: 10px;
max-width: 800px;
padding: 0 15px;
margin: auto;
}
/* Navbar */
nav.navbar {
padding: 22px 0 62px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
}
ul.navbar-nav {
width: 100% !important;
display: flex;
justify-content: space-around;
padding: 15px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.nav-link {
display: block;
width: 100px;
text-align: center;
color: #1d1d20;
text-decoration: unset;
text-transform: uppercase;
font-weight: bold;
}
/* Grid cards */
.last-cards {
display: flex;
flex-wrap: wrap;
}
.card {
width: 50%;
position: relative;
padding: 5px;
}
/* Cards */
.card {
display: flex;
justify-content: center;
align-items: center;
}
.card-img {
width: 100%;
}
h3 {
position: absolute;
color: white;
}
@media screen and (max-width: 575px) {
.last-cards {
flex-direction: column;
gap: 15px;
}
.card {
width: 100%;
max-height: 150px;
overflow: hidden;
}
}
This code uses Flexbox to organize the elements of the homepage in a structured way, allowing us to achieve efficient distribution and alignment of the different components. With Flexbox, we can easily adapt this layout to different devices and screen sizes, ensuring a consistent and appealing user experience across all devices.
Últimas Entradas
Cómo conectar Screaming Frog con ChatGPT para utilizarlo en tus crawls
La última versión de Screaming Frog es la bomba. La inclusión de Javascript personalizado para…
Cómo conseguir que Chat GPT recomiende tu marca
Es una realidad que cada vez más personas utilizan Chat GPT como un buscador. Teniendo…
Cómo analizar la competencia SEO con Sistrix
El análisis de la competencia SEO resulta un proceso fundamental cuando estamos tratando de auditar…
Guía Definitiva para crear un Embudo de Ventas en Google Ads
El embudo de ventas representa el viaje del cliente desde el conocimiento de la marca…
Universal Analytics dejará de funcionar a partir del 1 de julio del 2024. ¿Cómo prepararse?
El 1 de julio del 2024, las propiedades de Google Analytics 4 habrán sustituido por…
Creadores UGC: qué son y qué los diferencia de los influencers
Un estudio realizado por Harris Interactive dice que el 90% de los consumidores toma decisiones…
Sistrix: mejores herramientas SEO
En el mundo del SEO, las herramientas son un factor decisivo para poder ofrecer los…
Cómo crear contenido Evergreen que atraiga tráfico a tu web a largo plazo
Dentro de la creación de contenidos para tu página web, una de las estrategias más…
Qué es Google Discover y cómo usarlo
En el dinámico entorno digital, caracterizado por un flujo constante e incesante de datos, la…
¿Cómo optimizar tus contenidos con Search Generative Experience?
La constante búsqueda de innovación y adaptación define el éxito de las estrategias implementadas por…
Comment marketing: ¿Sabes lo que es?
¿Sueles comentar publicaciones en redes sociales? Si no lo haces, quizás deberías replanteartelo. El comment…
SEO tip estratégico: optimizando conversiones con datos de Paid
Algunos de los más puristas siempre dirán que el SEM (Search Engine Marketing) engloba tanto…
Qué es Search Intent o Intención de Búsqueda
En este artículo veremos qué es el Search Intent, también llamado Intención de Búsqueda. Este…
Nuevo Google Core Update con nuevas políticas anti spam
Google ha anunciado el 05 de marzo un core update con el objetivo de limpiar…
Gartner predice una caída de búsquedas en Google del 25% en 2026 por la IA
Gartner, una prestigiosa empresa de publicaciones y estudios, ha pronosticado recientemente la caída en el…
Google Premier Partners 2024: ¿Qué es?
Recientemente, en SEOCOM hemos vuelto a convertirnos en Premier Partners de Google para este 2024.…
Google PageRank – Datos y curiosidades
PageRank, literalmente “posición de la página” viene del nombre de Larry Page, quien junto con…
Un estudio alerta sobre el impacto de Google SGE en el sector travel
Un reciente estudio de Peak Ace, una agencia alemana, ha explorado recientemente el impacto del…
Informes SEO y LINK BUILDING en Google Analytics 4
Los informes de Google Analytics 4 que os presentamos a continuación pueden ayudaros a visualizar…
¿Qué es el snackable content?
Este enfoque, cada vez más adoptado por marcas y creadores de contenido, es un pilar…
Google compra acceso a Reddit. ¿Veremos todavía más contenido de Reddit en Google?
Si ayer hablábamos de un estudio sobre el contenido de Reddit en los resultados de…
Google lanza nuevos datos estructurados de producto. Las variaciones de producto
Los datos estructurados de producto, que ya son uno de los datos estructurados más completos,…
El Adiós a las Campañas de Discovery Ads y la Bienvenida a la Era de Demand Gen
En el cambiante mundo del marketing digital, la adaptación y la evolución son clave para…
Meme marketing: cómo usarlo para tu estrategia digital
Hoy en día, todos estamos buscando esa chispa que haga que nuestras estrategias digitales destaquen…
Cómo iniciar una campaña de mailing exitosa
Si estás dando tus primeros pasos en la creación de campañas de mailings desde cero,…
Pain Point (o puntos de dolor) de un cliente. Así puedes identificarlos
En el amplio mundo del marketing digital, existen muchos factores a tener en cuenta para…
¿Qué es flexbox y cómo utilizarlo?
Flexbox, o Flexible Box Layout, es un modelo de diseño CSS que proporciona una forma…
SEO semántico: qué es y cómo hacer una estrategia
Las palabras son muy importantes en el SEO. Pero igual de importante es su significado.…
Mejores herramientas SEO para 2024
¿Cuáles son las mejores herramientas SEO que puedes utilizar hoy en día?Solo hace falta buscar…
Qué es el EEAT en SEO: guía para optimizarlo
Navegar por el océano del posicionamiento en buscadores puede parecerte una tarea desalentadora. Sin embargo,…
Diseño web responsive con Tailwind CSS
El diseño web responsive se ha convertido en una parte fundamental del desarrollo web en…
Servicios de posicionamiento y SEO. Lo que necesitas y lo que no
A la hora de contactar con una agencia de SEO para solicitar un servicio, la…
¿Qué es el marketing de contenidos?
Content Marketing o Marketing de Contenidos… Este último año hemos oído este término muchas veces,…
Licensing vs Merchandising: ¿conoces las diferencias?
En el mundo del entretenimiento, la venta de productos relacionados con la ficción o con…
Google presenta «Circle to Search» y «Multisearch». Nuevas maneras de buscar en Android
Google ha presentado recientemente dos novedades para los usuarios de móviles y tablets con sistema…
Google se está cargando a los Quality Raters. ¿La IA tomará el control?
La semana pasada saltaba la noticia. Google está finalizando contratos con las empresas de terceros…
La batalla de los contenidos cortos: TikTok vs YouTube
La competencia en el mundo de las redes sociales ha alcanzado nuevas alturas con la…
¿Conoces el Dark Social?
Los hábitos de los usuarios online se están transformando igual que cambia el funcionamiento de…
Aparecer primero en google. Comparamos recomendaciones de chatBOTS. ¿Los nuevos reyes del SEO?
A pesar de que en SEOCOM somos expertos en SEO a nivel profesional, no ignoramos…
De lead a cliente: Claves para lograr una venta
¿Cómo lograr una venta?Lograr la venta de un proyecto depende de la calidad con la…
Branded Content: todo lo que necesitas saber sobre contenido de marca
¿Por qué ciertas marcas nos vienen a la cabeza cuando nos mencionan un tipo de…
Cómo bloquear el acceso de los bots de IA a tu sitio web
En el lado técnico de tu estrategia de contenidos , la protección de tu página…
Novedades en el SEO local de Google para este año
El SEO local va a seguir siendo este año un pilar fundamental en la mayoría…
Pinterest España: la tendencia para este 2024
La conversación del 2023 estuvo alrededor de TikTok, de cómo las marcas tenían que sumarse…
¿Has oído hablar sobre el FOOH?: la nueva tendencia publicitaria de lo más futurista
En los últimos meses, las grandes compañías han empezado a apostar por anuncios de lo…
Rankings orgánicos de Google y de Google SGE no coinciden el 94% de las veces. Houston, ¿tenemos un problema?
Un reciente estudio publicado sobre el impacto de SGE en los rankings de los resultados…
Análisis de Sentimiento en SEO. ¿Sirve de algo? Usos y herramientas
¿Cómo saber si estamos llegando y conectando con nuestra audiencia a un nivel emocional, más…
¿Son las menciones de marca el nuevo linkbuilding?
Conseguir enlaces para tu sitio web puede ser una tarea ardua y costosa. Muchos profesionales…
El papel del SEO en SGE. ¿El nacimiento del SGEO?
El impacto del nuevo motor de búsqueda de Google, SGE, tendrá unos efectos notables en…
Marketing conversacional: ¿lo conoces?
Marketing conversacional: ¿lo conoces?
Google confirma que el horario de tu negocio tiene impacto en el SEO local y Google Maps
Algunos profesionales del SEO han descubierto recientemente que Google ha reajustado sus algoritmos de búsqueda…
¿Puede el blog de tu empresa aparecer en Google News?
Google news puede ser una muy buena fuente de lectores y usuarios para tu blog.…
Storyselling: vender contando historias
Si no lo has escuchado todavía, el storyselling, o vender a través de contar historias,…
Marketing digital: Claves para afrontar el 2024
Desde luego, viene un año lleno de cambios y novedades por delante. Pero no hay…
NurIA: la influencer virtual experta en marketing
Pese a que suena todavía lejano, crear contenido con inteligencia artificial ya es algo muy…
El éxito detrás del marketing de influencers
Si estás buscando generar conexiones significativas con tu público objetivo, crear una campaña con influencers…
SEOcrawl: el software para Reporting y Business Intelligence
Todo experto en SEO que se precie debe trabajar con las mejores herramientas, como es…
La transparencia en el trabajo de una agencia SEO
Cuando se trata de mejorar la visibilidad de una página web,contratar a una agencia de…
Introducción al Content Marketing: por qué es esencial para tu estrategia digital
En este artículo, exploramos la importancia del Content Marketing en tu estrategia digital y cómo…
Las claves del SEO en 2023: últimas tendencias y actualizaciones
Descubre las últimas tendencias y actualizaciones en SEO para el año 2023. Conoce las claves…
Redacción SEO. Una herramienta potentísima que no estas usando. Sistrix Content Assistant
Una de las mejores maneras de incrementar tu tráfico orgánico es a través de la…
Aprende a analizar el perfil de enlaces de una web con Sistrix
Bienvenidos una vez más al blog de SEOCOM. En esta ocasión, vamos a hablar sobre…
¿Qué es una migración SEO y qué aspectos debemos tener en cuenta?
Las migraciones de sitios web son seguramente una de las tareas más sensibles de ejecutar…
Saca provecho a tus análisis de palabras clave con Sistrix
¿Quieres optimizar tu estrategia SEO y mejorar tu posicionamiento en los motores de búsqueda? Entonces…
Estrategias para mejorar el SEO a través de las redes sociales
Las redes sociales son una herramienta muy poderosa de estrategia de marketing para mejorar el…
Crear un status de proyecto web con Sistrix
Hoy venimos a hablaros sobre como conocer el estado SEO de un proyecto, qué debemos…
Etiqueta rel=“Canonical” en SEO: Qué es y cómo usarla de forma correcta.
Este post, vamos a hablar sobre la etiqueta Rel="canonical", y vamos a mirar de explicarte…
Controla tu proyecto web con Sistrix Optimizer
Como ya sabemos, Sistrix es una herramienta muy potente, y una de las favoritas de…
SEO para SAAS
¿Cuál puede ser la estrategia secreta que hace que una herramienta de diseño gráfico online…
Qué es una Auditoría SEO y cómo llevarla a cabo en el 2023
La auditoría SEO es el pilar de cualquier proyecto de posicionamiento web que vayamos a…
iMacros: Una herramienta para automatizar tareas en 2023
Si quieres ahorrar tiempo con tus tareas repetitivas con el navegador, en Seocom te explicamos…
Extensiones de anuncio en Google Ads. Actualizado [2023]
Si tienes creadas campañas en Google Ads y necesitas mejorar el CTR de tus anuncios…
Seo para imágenes. Básicos que no puedes olvidar
Las imágenes e infografías son de gran importancia en el diseño web, ya que es…
▷ Extensiones SEO para Google Chrome imprescindibles
En todo proyecto digital, es de gran importancia la parte que implica el SEO. Por…
Error 500 en WordPress: Causas y soluciones
¿Estás experimentando algún error de WordPress o te has encontrado con la página en blanco…
Microinfluencers y nanoinfluencers. ¿La solución que estás buscando?
¿Trabajar con todos los tipos de influencers ayudará a tu plan de marketing? La respuesta…
SEO para blogs: Cómo optimizar tus publicaciones
WordPress es sin duda el rey de los CMS. Aproximadamente un 20% de las webs…
Las 5 claves para un buen SEO local
Principalmente vamos a empezar por las preguntas más concretas: ¿Qué es el SEO local? El…
Cómo insertar marcado Schema en WordPress
Si has llegado hasta aquí significa que estás intentando pulir tu SEO para llevarlo a…
Descubre cómo crear un mapa de contenidos en 6 sencillos pasos
Un mapa de contenidos (también conocido como content mapping), nos sirve para saber con exactitud…