Flexbox in CSS to properly position your elements

There is one thing that is difficult to manage in CSS, it is the positioning of the elements! A real headache that has never been solved by 4 official and different positioning systems (block, inline, tabular, positioned). But CSS thanks to the flexbox system has been able to offer a module dedicated to positioning. This will be very useful if you want to code your own website or landing page.

Flexbox allows:

  • the distribution of elements both in lines and in blocks
  • the control and management of available space
  • control of alignments on the main and secondary axis
  • the arrangement of the elements without taking into account the DOM (order of flow)

How does flexbox work ?

By declaring a display element: display: flex, it becomes a flexible container or flex-container. A flexible box that has, as children, flexible elements or flex-items.

Two axes for a flexible layout:

flexbox model

There is no vertical or horizontal axis since there is a flex-direction property that defines the scroll axis and the direction

Because flexbox is difficult to understand, we will detail its many properties so that it is no longer a secret for you!

The properties of Flexbox

Display: flex as a starting point

Ownership applies to the flex-container, the parent.

 display : flex | inline-flex 

All elements of the flex-container automatically become flex-items.

Flex-direction for the general management

Ownership applies to the flex-container, the parent.

 flex-direction: row | row-reverse | column | colum-reverse 
  • row : from left to right
  • row-reverse : from right to left
  • column : from top to bottom
  • wrap-reverse : from bottom to top

You determine the direction of scrolling of the flexible elements.

flexbox - flex-direction

Flex-wrap to manage line breaks

Ownership applies to the flex-container, the parent.

flex-wrap : nowrap | wrap | wrap-reverse 
  • nowrap : a single line, from left to right
  • wrap : multiline, from left to right
  • wrap-reverse : multiline, from right to right

To distribute the elements over several lines you can use the flex-wrap property. By default the flex-items remain on the same line even if it means overflowing the container.

flexbox - flex-wrap

Flex-flow, the shortcut to Flex-direction and Flex-wrap

Ownership applies to the flex-container, the parent.

flex-flow : <'flex-direction'> || <'flex-wrap'> 

This is how you define the reading direction of the elements. You can define the reading direction by combining certain values.

flex-flow: row wrap ; // de gauche à droite et de haut en bas
flex-flow:row wrap-reverse ; // de gauche à droite et de bas en haut
flex-flow: row-reverse wrap ; // de droite à gauche et de haut en bas
flex-flow: row-reverse wrap-reverse ; // de droite à gauche et de haut en bas

Justify-content for the justification

Ownership applies to the flex-container, the parent.

justify-content : flex-start | flex-end | center | space-between | space-around 

This way you can control the distribution of the available space on each line.

You can note the similarity with text-align

You can determine the alignment of elements on the main axis based on 5 values:

  • flex-start: the elements are aligned with the beginning of the main axis
  • flex-end: the elements are aligned with the end of the main axis
  • center: the elements are centered on the main axis
  • space-between: the elements are aligned with the beginning of the axis. The first element concerns the beginning of the axis and the last element concerns the end of the axis (justification). Thus, the distribution is made in an equitable way on the main axis
  • space-around: the elements are equally distributed with identical spaces except for the edges with half a space before the first element and after the last one

Align-items to align content

Ownership applies to the flex-container, the parent.

align-items: flex-start | flex-end | center | baseline | stretch

The property defines the alignment on the minor axis with 5 values :

  • flex-start: all elements align towards the beginning of the secondary axis
  • flex-end: all elements align towards the end of the secondary axis
  • center: all elements are centered on the secondary axis
  • baseline: all elements are aligned on their secondary axis
  • stretch: Applied by default, all elements stretch in their container to fill the entire space
flexbox - align-items

Align-content to distribute lines

Ownership applies to the flex-container, the parent.

The management of the order in which elements will be aligned is managed by the property order. As with the z-index property, the element(s) that have the closest value is 0 are aligned first.

align-content: flex-start | flex-end | center | space-between | space-around | stretch 

This property distributes lines according to the available space in 6 different ways on the secondary axis.

  • flex-start: grouping of several lines at the beginning of the container
  • flex-end: grouping of lines at the end of the container
  • center: all lines are centered in the container
  • space-between: the first line touches the beginning of the container and the last line touches the end of the container for a fair distribution
  • space-around: All spaces are identical except on the edges where half a space is left before the first and after the last line
  • stretch: all lines stretch to occupy the remaining space
flexbox - align-content

Flex-grow for increasing element(s)

Ownership applies to flex-items, children

flex-grow: <number>

This property takes the value of a positive integer so that the element takes up more space than the others.

flexbox - flexgrow

The .item: can correspond to the tag <li> and the nth-of-type(2) will select the second item in the list

Flex-shrink for shrinking elements

Ownership applies to flex-items, children

flex-shrink: <number>

This is the opposite of the previous property to reduce one element compared to others.

Bibliography

GOETTER, raphaël. CSS3 : Pratique du design web, Eyrolles, 2015. 372 p. ISBN 9782212140231

signature Pierre-Christophe

No Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.