CSS Basics: Flexbox Made Simple – Discover the Secrets to Flexible and Attractive Layouts

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.

Example CSS 
/* Define the Flex Container */
.flex-container {
  display: flex;
  padding: 0;
  background: #dbdbdb;
  border: 2px solid #000000;
}


/* Define Flex Items */
.flex-container > .box {
  padding: 0.5em;
  font-size: 1.25em;
}

.flex-container > .box:nth-item(1) {
  background: #f82828;
  color: #000000;
}

.flex-container > .box:nth-item(2) {
  background: #94bbcc;
  color: #000000;
}

.flex-container > .box:nth-item(3) {
  background: #a2cc92;
  color: #000000;
}
Example HTML 
<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
Output of the HTML code
Box 1
Box 2
Box 3
This background       represents the screen and is not part of the sample code. Note:

Without further CSS rules, the flex items will be inserted into the flex container from left to right if there is little content in them.

If there is more content in the boxes, it is distributed over the available space.

Ausgabe des HTML-Codes
Box 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt et labore.

Box 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet.

Box 3

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.

This background       represents the screen and is not part of the sample code.

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.


The following example uses flex-direction: column to rotate the direction of the main axis. This causes the items to be arranged vertically from top to bottom.


Beispiel CSS 
/* Flex-Container definieren */
.flex-container {
  display: flex;
  padding: 0;
  background: #dbdbdb;
  border: 2px solid #000000;
  flex-direction: column;
}


/* Flex-Item definieren */
.flexContainer-Spl2 > .box {
  padding: 0.5em;
  font-size: 1.25em;
}

.flexContainer-Spl2 > .box:nth-item(1) {
  background: #f82828;
  color: #000000;
}

.flexContainer-Spl2 > .box:nth-item(2) {
  background: #94bbcc;
  color: #000000;
}

.flexContainer-Spl2 > .box:nth-item(3) {
  background: #a2cc92;
  color: #000000;
}
Beispiel HTML 
<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
Ausgabe des HTML-Codes
Box 1
Box 2
Box 3
This background       represents the screen and is not part of the sample code. 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.

Beispiel CSS 
/* Flex-Container definieren */
.flex-container {
  display: flex;
  padding: 0;
  background: #dbdbdb;
  border: 2px solid #000000;
}


/* Flex-Item definieren */
.flex-container > .box {
  padding: 0.5em;
  font-size: 1.25em;
}

.flex-container > .box:nth-item(1) {
  background: #f82828;
  color: #000000;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-container > .box:nth-item(2) {
  background: #94bbcc;
  color: #000000;
  flex-grow: 3;
  flex-shrink: 3;
}

.flex-container > .box:nth-item(3) {
  background: #a2cc92;
  color: #000000;
  flex.grow: 1;
  flex-shrink: 1;
}
Beispiel HTML 
<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
Ausgabe des HTML-Codes
Box 1
Box 2
Box 3
This background       represents the screen and is not part of the sample code.

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.