Flexbox in CSS

Flexbox is a CSS layout technique that lets you create responsive and flexible designs for websites and applications. With Flexbox, you can position elements on a page more easily and efficiently, without having to resort to CSS hacks or tricks.

One of the main benefits of Flexbox is its ability to adapt the layout according to the screen size. With Flexbox, you can create designs that are optimized for mobile, tablet, and desktop without having to create separate layouts for each screen size.

To use Flexbox on a website or application, you need to understand some basic concepts. The first is the concept of container and items. The container is the element that contains the items that will be positioned using the Flexbox. Items are the elements that will be positioned inside the container.

To define a container as a Flexbox container, it is necessary to use the display property with the flex value. For example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

In this example, the div with the container class is defined as a Flexbox container using the display property with the flex value. Inside this container, there are three divs with class item, which will be positioned using Flexbox.

Once the container has been defined as a Flexbox container, it is possible to use other CSS properties to position items within the container. Some of the most common properties are:

• justify-content: defines how items will be aligned horizontally within the container;
• align-items: defines how items will be aligned vertically within the container;
• flex-direction: defines the direction in which the items will be positioned inside the container;
• flex-wrap: defines whether items should be wrapped into lines when there is no more space available in the container;
• flex-grow: Sets the ratio at which items will grow relative to other items within the container.

For example, to align items horizontally in the center of the container, you can use the justify-content property with the value center:

.container {
  display: flex;
  justify-content: center;
}

With Flexbox, you can also define the size of items more flexibly. For example, you can set the size of an item as a percentage of the container size using the flex-basis property. It is also possible to set the size of the item as a ratio to the other items using the flex-grow property.

In summary, Flexbox is a powerful technique for creating responsive and flexible CSS layouts. With Flexbox, you can position elements on a page more easily and efficiently, without having to resort to CSS hacks or tricks. To use Flexbox on a website or application, you need to understand some basic concepts and use the correct CSS properties to position items within the container.

Next page of the Free Ebook:

29Grid in CSS

3 minutes