Align elements with Flexbox

Posted on In

Flexbox is a powerful layout tool in CSS that allows you to align and distribute space among items in a container. It is particularly useful for creating responsive designs and complex layouts with minimal code.

Common Flexbox Properties

Flexbox provides several properties that can be applied to both the container and the items within it. Here are some of the most commonly used properties:

For the container:

  • display: flex; - This property enables flexbox on the container.
  • flex-direction - Defines the direction of the flex items. Common values are row, column
  • justify-content - Aligns flex items along the main axis. Common values are center, space-between, space-around, flex-start, and flex-end.
  • align-items - Aligns flex items along the cross axis. Common values are center, stretch, flex-start, and flex-end.

Navigation Bar Example

This example demonstrates how to create a simple navigation bar using flexbox. The navigation bar contains links that are evenly spaced and centered within the container.

1
2
3
4
5
6
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.navbar {
  display: flex;
  justify-content: space-around; /* Evenly space items */
  align-items: center; /* Center items vertically */
  background-color: #333;
  padding: 10px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  text-align: center;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

Centering a Single Item

This example shows how to center a single item within a flex container. The item will be centered both horizontally and vertically.

1
2
3
<div class="container">
  <div class="item">Centered Item</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

Responsive Layout Example

This example demonstrates how to create a responsive layout using flexbox. The items will stack vertically on smaller screens and align horizontally on larger screens.

1
2
3
4
5
<div class="responsive-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.responsive-container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: space-between; /* Space items evenly */
}
.item {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  margin: 10px;
  flex: 1; /* Allow items to grow and shrink */
}
@media (max-width: 600px) {
  .item {
    flex: 100%; /* Stack items vertically on small screens */
  }
}

Conclusion

Flexbox is a powerful tool for creating flexible and responsive layouts in CSS. By using properties like display, justify-content, and align-items, you can easily align and distribute space among items in a container. The examples provided demonstrate some common use cases for flexbox, but the possibilities are endless. Experiment with different properties and values to create unique layouts that suit your design needs.

References