Responsive Design in CSS

Home / Topic / Responsive Design in CSS / Flexbox and Its Application in Responsive Design

Flexbox and Its Application in Responsive Design

Flexbox, or flexible box model, is a one-dimensional layout system that facilitates the distribution of elements within a container. Unlike CSS Grid, which organizes elements in two dimensions (rows and columns), Flexbox operates along a single axis, either horizontal or vertical. Flexbox is particularly useful for aligning and distributing space between elements, and is widely used to create responsive and adaptable designs.

What is Flexbox?

Flexbox is a method for efficiently distributing elements within a container. The parent container behaves as a "flex container" and its children as "flex items." With Flexbox, you can easily control the order, alignment, and size of child elements.

Visual reference of Flexbox Visual reference of Flexbox

Basic Structure of Flexbox

To use Flexbox, you need to declare display: flex on the parent container. The elements inside the container will align in a row by default.

css

"Here we declare display flex in the container, which makes its children align by default in a row."

Main Properties of Flexbox

Flexbox offers several properties that allow you to customize the alignment and distribution of elements. Below, we review some of the most important properties.

`flex-direction`

This property defines the main axis on which the elements will be aligned. By default, the elements align in a horizontal row (row), but they can also be aligned in a column (column).

css

"In this example, we change the direction of the main axis to a column. Now, the elements will align vertically instead of horizontally."

`justify-content`

Controls how elements are distributed along the main axis. You can center the elements, distribute them evenly, or align them towards the start or end of the container.

css

"Here we use justify content space between, which distributes the elements within the container with even space between them. The elements align towards the ends of the container."

`align-items`

This property controls the alignment of elements along the cross axis (perpendicular to the main axis). You can align the elements to the start, center, or end of the container.

css

"In this case, we align the elements at the center along the cross axis, which would be the vertical axis in a row container."

Flexbox Layout Example

Let's look at a simple example of Flexbox applied to a responsive design:

css

"In this code, the items inside the flex container are distributed in a row with justify content space around, which ensures there is even space around each item. The flex one property makes each item grow uniformly to fill the available space."

This code distributes three items evenly in a row, with space around each one. Additionally, each item has the ability to expand or shrink according to the available space thanks to the flex property.

Responsive Design with Flexbox

Flexbox is especially useful in responsive design because it allows elements to easily adapt to the size of the container. Combined with media queries, Flexbox can create layouts that dynamically adjust to different screen sizes.

css

"This example uses flex wrap, which allows items to wrap into multiple lines if there is not enough space in a single row. When the screen width is less than seven hundred sixty-eight pixels, each item occupies one hundred percent of the width, turning the layout into a column for small screens."

Flexbox vs CSS Grid

While both Flexbox and CSS Grid are powerful tools for creating layouts, each has its advantages and specific use cases. Flexbox is ideal for aligning elements in one dimension (horizontal or vertical) and for dynamically adjusting spaces between elements. On the other hand, CSS Grid is more suitable for creating complex layouts in two dimensions.

This image shows the comparison between flexbox and css grid This image shows the comparison between flexbox and css grid

Complete Example of Flexbox in Action

Below is a complete example using Flexbox for a design that adapts to different screen sizes:

html

"In this complete code, we use Flexbox to distribute the items in a row on large screens. The items occupy thirty percent of the available width. When the screen width is less than seven hundred sixty-eight pixels, the items adjust to a single column, occupying the entire width of the container."

Conclusion

Flexbox is a powerful and flexible tool for creating responsive layouts, especially when it comes to the alignment and distribution of elements along a single axis.

Back to previous chapter

Mark as read and continue

Ask me anything