CSS Flexbox - Tutorial.

Introduction to Flexbox.

Introduced in CSS3, flex-boxes provide a simple and powerful solution to the common layout problem of positioning multiple pieces of content side by side. Flex-boxes are a better alternative to floating elements. The latter can be reserved for what they were designed for: wrapping an image or a block of text.

To create a flexbox, you just need a parent element to which you apply the style display:flex;. Without doing anything else, its children will be positioned side by side instead of one below the other.

Here is a div element with three children. By default, they are arranged one below the other. Their width is 100% by default. This percentage is calculated based on the width of the parent after deducting any outer and inner margins.

1
2
3

Here is now the same construction, but the parent div has been given the property display:flex;. Immediately, the three child frames are positioned side by side inside the parent, and their width is determined by their content.

1
2
3

This is the basic principle of flex-box. We will now delve into their many possibilities.

Note: if your goal is simply to display text in multiple columns, like in a newspaper, refer to the CSS property columns .

The flex-direction property.

Flex-box containers can work in both directions. That is, they can arrange their children horizontally or vertically. The most common need is to arrange them horizontally, but vertical arrangement is also interesting.

The CSS property flex-direction defines the primary axis for the layout of child elements (in a row or column). The cross axis is easily derived: it is the one perpendicular to the primary axis. flex-direction also defines the display direction: from right to left or left to right, from top to bottom or bottom to top. Have fun with this little simulator or refer to the full description of the CSS property flex-direction .

flex-direction :
1
2
3

The positioning of elements in a flex-box.

Several properties allow us to manage the alignment and distribution of child elements within the flex container:

  • justify-content : manages the alignment of the children along the main axis defined by flex-direction. Most often, this will be the horizontal axis.
  • align-content : manages the alignment of children along the cross axis, which will most of the time be the vertical axis.

Note: Properties that act along the cross axis have a name that starts with align, whereas those that act along the main axis have a name that starts with justify. It's a mnemonic to help keep track of all these properties.

The simulator below allows you to test the justify-content property. This property doesn't just handle the usual alignment values (flex-start, center, flex-end) but also manages the distribution of elements within the flex container.

justify-content :
1
2
3

The dimensions of the items in a flex-box.

Just like alignment, the sizes of child elements can be managed precisely. The usual width and height properties are available but do not take full advantage of the power of flexbox. Prefer the following properties:

  • flex-basis : Sets the initial size of the child elements. This value can be modified by the following two properties.
  • flex-grow : Specifies whether the child element can grow to fill the flex container. If multiple children can grow, they do so in proportion to the value of this property.
  • flex-shrink : Indicates whether the child element can shrink when there is not enough space for all the child elements.
  • flex : shorthand property which takes up the values of the previous three properties.

All these properties apply to the children of a flex box and not to the container. The simulator applies them to the blue element.

flex-basis :
flex-shrink :
flex-grow :
1
2
3
4
5
6

Line breaks in a flex-box.

The CSS property flex-wrap controls line wrapping in a flex container. It's best to experiment a bit with this simulator to fully understand the capabilities and power of flex-wrap .

flex-wrap :
1
2
3
4
5
6

Conclusion.

We hoped that this quick overview of flex-box has made you want to use it. Feel free to study the properties related to flex-box in more depth: their flexibility and the power of flex-box will help you solve many layout problems.

To further explore all these concepts, we invite you to consult the following pages:

Enabling flexbox:
Defines what the element is and how it is displayed.
Dimensions of the elements:
Determines the default dimension of an element contained in a flex-box.
Allows or does not allow the enlargement of an element contained in a flex-box.
Whether or not to allow the compression (reduction of width) of an element contained in a flex box.
Shorthand property to define the main features related to the dimensions of the elements inside a flexbox.
Alignment of elements:
Defines the positioning in a flex-box or grid along the main axis (most often horizontal).
Manages the arrangement of elements in a flex-box or a grid, following the secondary axis (most often vertical).
Spacing of elements:
Sets spacing between rows and between columns in the context of a grid, flex-box, or multi-column layout)
Filling management:
Chooses the main and secondary axis of a flex box.
Management of line breaks in a flex-box container.
Linking child elements in a flex-box.
Define order of elements in a flex-box.