Retour aux articles
Wednesday, January 8, 202515 vues1

Flexbox for Beginners: Create Modern Layouts in No Time

Mike Codeur

Flexbox
CSS

Flexbox is a powerful and essential CSS technology for creating modern, responsive layouts. Whether you are a beginner or looking to simplify your designs, Flexbox can transform the way you structure your interfaces.

What is Flexbox?

Flexbox, or "Flexible Box Layout," is a CSS module designed to align elements flexibly and efficiently. Unlike traditional layouts, Flexbox manages alignment both horizontally and vertically, making it ideal for modern designs.

Basic Concepts of Flexbox

  1. The Flex Container: This is the parent element that contains the items to be aligned. To enable Flexbox, apply display: flex; to this element.
  2. Flex Items: These are the children of the container, which can be resized and aligned using specific properties like flex-grow, flex-shrink, and flex-basis.
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
CSS
.container {
  display: flex;
}
.item {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

How to Align Elements with Flexbox

Horizontal Alignment

To control the distribution of elements along the main axis (horizontal by default), use justify-content:

  • justify-content: flex-start;: Aligns to the left (default).
  • justify-content: center;: Centers the items.
  • justify-content: space-between;: Equal spacing between items.
CSS
.container {
  display: flex;
  justify-content: center;
}

Vertical Alignment

To align items along the cross axis (vertical by default), use align-items:

  • align-items: flex-start;: Aligns at the top.
  • align-items: center;: Vertically centers the items.
  • align-items: flex-end;: Aligns at the bottom.
CSS
.container {
  display: flex;
  align-items: center;
}

Direction of Items

You can change the orientation of items with flex-direction:

  • flex-direction: row;: Horizontal orientation (default).
  • flex-direction: column;: Vertical orientation.
CSS
.container {
  display: flex;
  flex-direction: column;
}

Practical Example: Creating a Simple Layout

Let's imagine a layout with a menu at the top and centered content.

HTML
<div class="layout">
  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <main class="content">
    <h1>Welcome to My Site</h1>
    <p>Create modern layouts with Flexbox!</p>
  </main>
</div>
CSS
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.menu {
  display: flex;
  justify-content: space-around;
  background-color: #007BFF;
  padding: 10px;
}
.menu a {
  color: #fff;
  text-decoration: none;
}
.content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Conclusion

Flexbox is an essential tool for web developers looking to create modern, responsive designs. By understanding the basics, you can easily align your items and structure your pages in no time. Try it in your projects to see the difference!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.