CSS3 Flexbox is a powerful technology for creating responsive and flexible layouts. It allows you to evenly distribute space between elements, align them, and reorder them without using additional tools such as float or position.

The main concepts of Flexbox are

Container and elements

Flexbox works on the basis of a flexible container (parent element) and flexible elements (nested child elements).

Main and transverse axes

  • The Main Axis is the direction in which the elements are placed (row or column).
  • Cross Axis is perpendicular to the main axis (for example, if it is a row, the cross axis is vertical).

The main properties of Flexbox

Installing the container

To activate the Flexbox, add display: flex;. This turns all nested elements into flexible ones.

Direction of elements (flex-direction)

Determines the location of elements along the main axis:

  • row – horizontally from left to right (default);
  • row-reverse – from right to left;
  • column – vertically from top to bottom;
  • column-reverse – from bottom to top.

Alignment on the main axis (justify-content)

Controls how elements are distributed in the container:

  • flex-start – at the beginning (default);
  • flex-end – at the end;
  • center – in the center;
  • space-between – evenly spaced between elements;
  • space-around – uniform indents around the elements.

Alignment along the transverse axis (align-items)

Controls vertical alignment:

  • stretch – elements are stretched (default);
  • flex-start – aligned along the top edge;
  • flex-end – by the bottom edge;
  • center – in the center;
  • baseline – along the baseline of the text.

Line alignment (align-content)

If there are several lines, this property distributes them similarly to justify-content, but vertically.

Flexibility of elements (flex-grow, flex-shrink, flex-basis)

  • flex-grow – determines how much space an element will take up compared to others;
  • flex-shrink – controls the compression of the element;
  • flex-basis – sets the initial size of the element.

Conclusion

Flexbox is a simple and effective way to create responsive layouts. Thanks to this technology, you can easily arrange elements, distribute space between them, and adapt them to different screens.

By Blog