CSS Basics: Transform Your Web Projects – How to Build a Responsive Layout Using Flexbox Techniques

Deutsch

CSS Flexbox Tutorial


In web design, the term Layout refers to the way in which a website is displayed on the screen. In the world of mobile devices and a variety of different screen resolutions, responsive web design is more important than ever before. Today, a website must adapt to the needs of the user and present the content clearly. A good layout ensures that the website is easy to access and that all content is intuitive to find.

Besides CSS Grid, Flexbox (CSS Flexible Box Layout Module) is one of the two most important techniques for creating flexible layouts.

Flexbox is a one-dimensional layout model. This means that Flexbox handles either rows or columns, but never both together. Flexbox is particularly recommended if you want to arrange several elements either row by row or column by column.

In contrast to the previously used float model, Flexbox is designed to create flexible and responsive layouts. For this reason, very powerful and convenient options are available for aligning adjacent elements.

Flexbox Basics

Flexbox is based on a parent element (flex container) that contains a number of child elements (flex items). The display: flex property is used to tell the container that Flexbox is to be used. The properties defined in the flex container are inherited by all flex items.

Flexbox only affects direct child elements of the flex container. All other nesting is ignored.

There are two axes in the flex container – the main axis and the cross axis. By default, the main axis runs horizontally from left to right, while the cross axis runs vertically from top to bottom.

Flexbox Axes
Flexbox with Main Axis and Cross Axis
Note:

Flexbox is particularly useful when you need to position two or more elements side-by-side or top-to-bottom in a given area.

When it comes to design the entire layout of a website, CSS Grid is more suitable, as it was designed specifically for this purpose.

The flex items are arranged along the main axis and all have the same height. The flex-direction property of the container is used to change the direction of the main axis.

The following values are valid:

flex-direction: row is the default value.


Note:

The flex-direction property doesn't rotate the two axes together. Only the main axis is rotated. The following images show the orientation of the cross axis in relation to the main axis.

Overview of all flex-direction variants.

flex-direction: row flex-direction: row-reverse flex-direction: column flex-direction: column-reverse

Position Flex Items along the Main Axis

By default, the flex items are positioned at the beginning of the main axis. The justify-content property is used to position the flex items along the main axis.

The justify-content property is defined in the flex container.

There are a number of values to position the items:

justify-content: flex-end is not the same as flex-direction: row-reverse. While the first variant positions the last item on the right, the other variant completely changes the order of the items and positions the first item on the right.

Position Flex Items on the Cross Axis

The justify-content property is used to align items on the main axis. However, if you want to align the content on the cross axis, you have to use the align-items property.

The align-items property is defined in the flex container.

A number of options have been implemented in Flexbox to position items on the cross axis.

The following values are possible:


Similar to the justify-content property, which controls the alignment of the items along the main axis, the align-content property is used to align the flex items along the cross axis.

The align-content property is defined in the flex container.

align-content only has a visible effect if there is more than one line of flex items.

Standard Properties of the Flex Items

Besides positioning the items via the flex container, the items themselves can also be customized. There are also some useful properties for this purpose.

Classic CSS properties and the Box Model can be used to customize the items. There are also the Flexbox properties
flex-grow,
flex-shrink and
flex-basis,
to adjust the size of the items.


It is recommended to use the flex shorthand property instead of using separate flex-grow, flex-shrink and flex-basis declarations.

flex accepts one, two or three values.