Flexbox

Hello, everyone! Welcome to the Flexbox lesson.

In this lesson, we will learn about flexbox, a CSS property that can be used to create flexible and responsive layouts.

What is flexbox?

Flexbox is a CSS property that allows organizing elements in a flexible row or column. Flexible elements can be resized, reordered, and aligned according to the layout needs.

Basic Flexbox Properties

To use flexbox, we need to set the display property of the element to flex:

.container {
  display: flex;
}

After setting the display property to flex, we can use the following properties to control the layout:

• Flex-direction: Defines the direction of the flexible layout. Possible values are row (horizontal) and column (vertical).
• Flex-wrap: Defines whether flexible elements should resize to fit within the container’s width or if they should break into additional rows or columns. Possible values are nowrap (no break) and wrap (break).
• Flex-grow: Defines how the flexible element should expand if the container has available space. Possible values are 0 (does not grow), 1 (grows proportionally to available space), and auto (grows to fill available space).
• Flex-shrink: Defines how the flexible element should shrink if the container has limited space. Possible values are 0 (does not shrink), 1 (shrinks proportionally to available space), and auto (shrinks to fit within available space).
• Flex-basis: Defines the initial width or height of the flexible element.

Examples

Let’s see some examples of how to use the basic flexbox properties:

Example 1:

The following CSS code uses flexbox to create a two-column layout:

.container {
  display: flex;
  flex-direction: column;
}

.col-1 {
  flex-grow: 1;
}

.col-2 {
  flex-grow: 1;
}

This code sets the layout direction as column and defines both elements as flexible with a flex-grow of 1. This means both elements will grow proportionally to the available space in the container.

Example 2:

The following CSS code uses flexbox to create a three-column layout with equal widths:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-1, .col-2, .col-3 {
  flex: 1 1 auto;
}

This code sets the layout direction as row, sets flex-wrap to wrap to break elements into additional rows if needed, and defines each element as flexible with a flex of 1 1 auto. This means each element will have the same width and grow proportionally to the available space.

Note

It’s important to use CSS selectors to control which CSS rules are applied to which elements. This will help keep your CSS organized and easy to maintain.

Summary

In this lesson, we learned about flexbox, a CSS property that can be used to create flexible and responsive layouts.

We explored the basic flexbox properties and saw some examples of how to use these properties to create different layouts.

Try creating layouts using the flexbox properties you learned in this lesson. Experiment with different sizes, shapes, and alignments.

In the next topic, we will learn about the grid, another CSS property that can be used to create flexible and responsive layouts.

Compartilhar

Compartilhar

Siga-me