What is display:flex in CSS?

When we start designing websites, one of the most frustrating tasks can be aligning elements properly.

As a developer and teacher, I know we get questions like:

• How do I ensure that elements align both vertically and horizontally and look good on different devices and resolutions?
• How can I distribute buttons evenly in a space?

No one is born knowing, but after several trials and errors, learning how to use display: flex in CSS greatly simplified my design process.

If you are looking for a practical and efficient solution to improve the layout of your elements and optimize your designs, this article is just what you need.

What will you find in this article?

In this article, we'll explore the CSS display: flex property in depth, covering the following points:

• What is display: flex in CSS?
• What is display: flex used for?
• Basic display: flex
• Properties that you can combine with display: flex
• Practical examples of use:
  • Center an element
  • Distribute items in a menu
• Tips for working with display: flex

---

What is display: flex in CSS?

The display: flex property enables the flexbox model on a container, allowing for efficient and adaptable layout of child elements within it.

When you apply display: flex to a container, it becomes a flex container and its direct elements become flex items .

---

What is display: flex used for?

display: flex is used to create more flexible and responsive web designs. It makes it easier to align and distribute elements within a container, automatically adapting to different screen sizes and orientations. This is especially useful for designing interfaces that require a dynamic and adaptable arrangement of elements.

---

Basic display: flex

To convert an element into a flex container, the following syntax is used:

.contenedor { display: flex; }

When this property is applied, the direct child elements of the container will behave as flex items, aligning according to the rules of the flexbox model.

---

Properties that you can combine with display: flex

Once a container is defined as flex, you can use various properties to control the layout of flex items:

• flex-direction : Defines the direction in which items are placed within the container. Common values: row (horizontal row), column (vertical column).
• justify-content : Aligns items along the main axis. Common values: flex-start , flex-end , center , space-between , space-around .
• align-items : Aligns items along the cross axis. Common values: flex-start , flex-end , center , stretch .
• flex-wrap : Controls whether or not items should wrap across multiple lines. Values: nowrap (default), wrap , wrap-reverse .
• align-content : Aligns the container lines when there is extra space on the cross axis. Values: flex-start , flex-end , center , space-between , space-around , stretch .

These properties allow you to customize and control the arrangement of elements within the flex container precisely.

You can find more information at developer.mozilla.org

And before we continue with more tips, how about taking a little break? Do it with one of our personalized mugs for programmers!

Because, after all, designing with style also helps improve productivity. ☕👕

---

display: flex

Below are some practical examples of how to use display: flex in different situations:

Center an element

To center an element either horizontally or vertically within a container:

 
<div class="contenedor">
 <div class="elemento">Contenido centrado</div>
 </div>
 
.contenedor {
 display: flex;
 justify-content: center; /* Centra horizontalmente */
 align-items: center; /* Centra verticalmente */
 height: 100vh; /* Altura del contenedor */
 }

In this example, the flex container centers the child element in both directions.

Distribute items in a menu

To create a menu with evenly distributed items:1

 
<nav class="menu">
 <a href="#">Inicio</a> 
<a href="#">Services</a>
 <a href="#">Contact</a>
 </nav>

 
.menu {
 display: flex;
 justify-content: space-around; /* Distribuye espacio equitativamente */
 background-color: #333;
 }

 .menu a {
 color: white;
 text-decoration: none;
 padding: 15px;
 }

In this case, the menu links are evenly distributed throughout the container.

---

Tips for working with display: flex

• Understanding Axes : The main main axis and cross axis axis are critical to understanding how flex items align.
• Use shorthand properties : Properties like flex can make writing and understanding code easier.
• Test and adjust : Experiment with different combinations of properties to achieve the desired design.
• Compatibility : Although flexbox is widely supported in modern browsers, it is always good practice to check for compatibility and provide workarounds if needed.

For a more detailed reference and additional examples, you can check out the official MDN documentation on Flexbox Basics .

---