What is Flexbox and how to use it
![¿Qué es flexbox y cómo utilizarlo?](https://seocom.agency/wp-content/uploads/2024/02/Copia-de-¿Sabes-lo-que-es-la-semantica-¿Y-porque-es-relevante-en-el-SEO.png)
![¿Qué es flexbox y cómo utilizarlo?](https://seocom.agency/wp-content/uploads/2024/02/Copia-de-¿Sabes-lo-que-es-la-semantica-¿Y-porque-es-relevante-en-el-SEO.png)
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.
Table of Contents
TogglePrerequisites
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Row-1024x91.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Row-1024x91.png)
Column
This way the content is distributed horizontaly:
.container {
padding: 22px;
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
display: flex;
flex-direction: column;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Column-1024x366.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Column-1024x366.png)
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Flex-por-defecto-1024x335.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Flex-por-defecto-1024x335.png)
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 */;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Justify-Content-1024x335.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Justify-Content-1024x335.png)
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 */;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Align-Items-1024x335.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Align-Items-1024x335.png)
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Centrar-1024x335.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Centrar-1024x335.png)
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:
![](https://seocom.agency/wp-content/uploads/2024/02/Justify-Content-Menu-1024x91.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Justify-Content-Menu-1024x91.png)
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Between-1024x91.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Between-1024x91.png)
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Around-1024x91.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Around-1024x91.png)
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;
}
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Evenly-1024x91.png)
![](https://seocom.agency/wp-content/uploads/2024/02/Space-Evenly-1024x91.png)
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.
![](/wp-content/uploads/2024/02/Ejemplo-de-landing.png)
![](/wp-content/uploads/2024/02/Ejemplo-de-landing.png)
![](/wp-content/uploads/2024/02/Ejemplo-de-landing-Mobile.png)
![](/wp-content/uploads/2024/02/Ejemplo-de-landing-Mobile.png)
Latest Posts
![How to use Google Search Console and ScreamingFrog to perform a technical audit of your domain](https://seocom.agency/wp-content/uploads/2024/07/GSC-Guide-2-400x280.png)
![How to use Google Search Console and ScreamingFrog to perform a technical audit of your domain](https://seocom.agency/wp-content/uploads/2024/07/GSC-Guide-2-400x280.png)
How to use Google Search Console and ScreamingFrog to perform a technical audit of your domain
Using APIs to connect Google Search Console with ScreamingFrog This is the second guide on…
![Search Console Performance Report: tips and tricks](https://seocom.agency/wp-content/uploads/2024/07/GSC-Guide-400x280.png)
![Search Console Performance Report: tips and tricks](https://seocom.agency/wp-content/uploads/2024/07/GSC-Guide-400x280.png)
Google Search Console Guide: secrets on Performance Analysis
This is the first part of a comprehensive set of articles on Google Search Console…
![The secrets of Google's algorithm leaked. Will SEO change from now on?](https://seocom.agency/wp-content/uploads/2024/05/Se-filtran-datos-secretos-algoritmo-google-SEO-400x280.webp)
![The secrets of Google's algorithm leaked. Will SEO change from now on?](https://seocom.agency/wp-content/uploads/2024/05/Se-filtran-datos-secretos-algoritmo-google-SEO-400x280.webp)
The secrets of Google’s algorithm leaked. Will SEO change from now on?
The world of SEO and Digital Marketing has been revolutionized by the alleged leak of…
![The 8 essential tips for an SEO strategy for casinos](https://seocom.agency/wp-content/uploads/2024/05/Copia-de-Como-crear-contenido-optimizado-para-motores-de-busqueda-sin-sacrificar-la-calidad-400x280.png)
![The 8 essential tips for an SEO strategy for casinos](https://seocom.agency/wp-content/uploads/2024/05/Copia-de-Como-crear-contenido-optimizado-para-motores-de-busqueda-sin-sacrificar-la-calidad-400x280.png)
The 8 essential tips for an SEO strategy for casinos
In this article, we offer you a detailed guide to optimizing your online gambling or…
![How to Create Search Engine Optimized Content Without Sacrificing Quality](https://seocom.agency/wp-content/uploads/2024/05/Como-crear-contenido-optimizado-para-motores-de-busqueda-sin-sacrificar-la-calidad-400x280.png)
![How to Create Search Engine Optimized Content Without Sacrificing Quality](https://seocom.agency/wp-content/uploads/2024/05/Como-crear-contenido-optimizado-para-motores-de-busqueda-sin-sacrificar-la-calidad-400x280.png)
How to Create Search Engine Optimized Content Without Sacrificing Quality
When writing content, we often find ourselves faced with a dilemma: is it possible to…
![How to optimize the product sheets of your ecommerce: Guide 2024](https://seocom.agency/wp-content/uploads/2024/05/Como-optimizar-las-fichas-de-producto-de-tu-ecommerce-Guia-2024-400x280.png)
![How to optimize the product sheets of your ecommerce: Guide 2024](https://seocom.agency/wp-content/uploads/2024/05/Como-optimizar-las-fichas-de-producto-de-tu-ecommerce-Guia-2024-400x280.png)
How to optimize the product sheets of your ecommerce: Guide 2024
Guide to product sheets in 2024 for ecommerce The product sheets of any e-commerce are…
![How SEO can boost your company's sales](https://seocom.agency/wp-content/uploads/2024/05/Como-el-SEO-puede-impulsar-las-ventas-de-tu-empresa-400x280.png)
![How SEO can boost your company's sales](https://seocom.agency/wp-content/uploads/2024/05/Como-el-SEO-puede-impulsar-las-ventas-de-tu-empresa-400x280.png)
How SEO can boost your company’s sales
Relationship between SEO and your company's sales In the world of modern commerce and digital…
![How to block access to Ai Overviews. Google updates its documentation](https://seocom.agency/wp-content/uploads/2024/05/Bloquear-el-acceso-de-Ai-Overviews-.-Google-actualiza-su-documentacion-400x280.jpg)
![How to block access to Ai Overviews. Google updates its documentation](https://seocom.agency/wp-content/uploads/2024/05/Bloquear-el-acceso-de-Ai-Overviews-.-Google-actualiza-su-documentacion-400x280.jpg)
How to block access to Ai Overviews. Google updates its documentation
The recent update to the official documentation page refers to several news about the recent…
![busquedas-por-voz-seo (1)](https://seocom.agency/wp-content/uploads/2024/05/busquedas-por-voz-seo-1-400x280.jpg)
![busquedas-por-voz-seo (1)](https://seocom.agency/wp-content/uploads/2024/05/busquedas-por-voz-seo-1-400x280.jpg)
How to Optimize Content for Voice Search in 2024
Voice searches are fundamentally changing how users interact with technology in daily life. With the…
![Errores Web 404, 403, 503, 502, 401.. Significado y soluciones](https://seocom.agency/wp-content/uploads/2024/05/Errores-Web-404-403-503-502-401.-Significado-y-soluciones-400x280.jpg)
![Errores Web 404, 403, 503, 502, 401.. Significado y soluciones](https://seocom.agency/wp-content/uploads/2024/05/Errores-Web-404-403-503-502-401.-Significado-y-soluciones-400x280.jpg)
Web Errors | 404, 403, 503, 502, 401 | Meaning and Solutions
In other posts like this one about the error 500 in WordPress, we've covered some…
![Más IA en el buscador de Google con el anuncio de Ai Overview](https://seocom.agency/wp-content/uploads/2024/05/Mas-IA-en-el-buscador-de-Google-con-el-anuncio-de-Ai-Overview-400x280.jpg)
![Más IA en el buscador de Google con el anuncio de Ai Overview](https://seocom.agency/wp-content/uploads/2024/05/Mas-IA-en-el-buscador-de-Google-con-el-anuncio-de-Ai-Overview-400x280.jpg)
More AI in Google Search with the Announcement of AI Overview
Out of all the announcements we have seen at the 2024 Google I/O event, the…
![Revoluciona tu SEO con las entidades. Más allá de las palabras clave](https://seocom.agency/wp-content/uploads/2024/05/Revoluciona-tu-SEO-con-las-entidades.-Mas-alla-de-las-palabras-clave-400x280.jpg)
![Revoluciona tu SEO con las entidades. Más allá de las palabras clave](https://seocom.agency/wp-content/uploads/2024/05/Revoluciona-tu-SEO-con-las-entidades.-Mas-alla-de-las-palabras-clave-400x280.jpg)
Revolutionize your SEO with Entities: Beyond Keywords
The term "entities" has become super popular in the SEO and digital marketing sector in…
![Cómo conectar Screaming Frog con ChatGPT para utilizarlo en tus crawls](https://seocom.agency/wp-content/uploads/2024/05/Como-conectar-Screaming-Frog-con-ChatGPT-para-utilizarlo-en-tus-crawls-400x280.jpg)
![Cómo conectar Screaming Frog con ChatGPT para utilizarlo en tus crawls](https://seocom.agency/wp-content/uploads/2024/05/Como-conectar-Screaming-Frog-con-ChatGPT-para-utilizarlo-en-tus-crawls-400x280.jpg)
How to connect Screaming Frog with ChatGPT to use in your Crawls
The latest version of Screaming Frog is amazing. The inclusion of custom JavaScript to run…
![How to Get Chat GPT to Recommend Your Brand](https://seocom.agency/wp-content/uploads/2024/05/Como-conseguir-que-Chat-GPT-recomiende-tu-marca-400x280.png)
![How to Get Chat GPT to Recommend Your Brand](https://seocom.agency/wp-content/uploads/2024/05/Como-conseguir-que-Chat-GPT-recomiende-tu-marca-400x280.png)
How to Get Chat GPT to Recommend Your Brand
It's becoming increasingly clear that more and more people are using Chat GPT like a…
![How to analyze SEO competition with Sistrix](https://seocom.agency/wp-content/uploads/2024/04/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
![How to analyze SEO competition with Sistrix](https://seocom.agency/wp-content/uploads/2024/04/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
How to analyze SEO competition with Sistrix
SEO competition analysis is a fundamental process when we are trying to audit the status…
![Ultimate Guide to Create a Sales Funnel in Google Ads](https://seocom.agency/wp-content/uploads/2024/04/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
![Ultimate Guide to Create a Sales Funnel in Google Ads](https://seocom.agency/wp-content/uploads/2024/04/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
Ultimate Guide to Create a Sales Funnel in Google Ads
The sales funnel represents the customer's journey from brand awareness through the consideration stage, and…
![Universal Analytics will stop working as of July 1, 2024. How to prepare?](https://seocom.agency/wp-content/uploads/2024/04/Universal-Analytics-dejara-de-funcionar-a-partir-del-1-de-julio-del-2024-400x280.png)
![Universal Analytics will stop working as of July 1, 2024. How to prepare?](https://seocom.agency/wp-content/uploads/2024/04/Universal-Analytics-dejara-de-funcionar-a-partir-del-1-de-julio-del-2024-400x280.png)
Universal Analytics will stop working as of July 1, 2024. How to prepare?
On July 1, 2024, Google Analytics 4 properties will have completely replaced Universal Analytics properties.…
![cre](https://seocom.agency/wp-content/uploads/2024/03/Copy-of-Untitled-Design-400x280.png)
![cre](https://seocom.agency/wp-content/uploads/2024/03/Copy-of-Untitled-Design-400x280.png)
UGC creators: what are they and what differentiates them from influencers
A study conducted by Harris Interactive says that 90% of consumers make purchasing decisions based…
![Sistrix: mejores herramientas SEO](https://seocom.agency/wp-content/uploads/2024/03/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
![Sistrix: mejores herramientas SEO](https://seocom.agency/wp-content/uploads/2024/03/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-400x280.png)
Sistrix: one of the best SEO tools
In the world of SEO, tools are a decisive factor in being able to offer…
![How to create Evergreen content that drives traffic to your website in the long term](https://seocom.agency/wp-content/uploads/2024/03/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-1-400x280.png)
![How to create Evergreen content that drives traffic to your website in the long term](https://seocom.agency/wp-content/uploads/2024/03/Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Copia-de-Exar.live_-1-400x280.png)
How to create Evergreen content that drives traffic to your website in the long term
Within the creation of content for your website, one of the most effective strategies is…