CSS Flexbox Tutorial for Beginners

With cascading style sheets (CSS), websites can be designed to look more appealing. While HTML contains only the most important base elements, one can implement complex web design via CSS by inserting images in a more appealing way, arranging texts, and in­teg­rat­ing elements that stand out on a website. The helpful mark-up language continues to be developed to help simplify web design tasks and provide new design options. CSS Flexbox is one example of this ongoing de­vel­op­ment and has quickly become an important tool for sensible web designs in the mobile age.

One of the main tasks for CSS is bringing all the elements of a website into a layout. Text, images, and buttons can be neatly arranged. Designers can specify – down to every pixel – where each element should appear on the screen. However, this only works properly if the screen size and the aspect ratio are known. Mobile tech­no­logy presents a challenge here because display sizes and aspect ratios vary depending on the smart­phone or tablet device. CSS is too rigid to achieve a con­vin­cing result.

The Flexbox (or more exactly: the CSS Flexible Box layout) functions more in­tel­li­gently and dy­nam­ic­ally. The layout adjusts flexibly and dy­nam­ic­ally to the display in use. Space is filled up or elements are pushed closer together so that every web page element remains in view. For this to work without the desired layout being disrupted, Flexbox uses two axes. The main axis typically runs ho­ri­zont­ally; the cross-axis runs ver­tic­ally. Using these axes, the elements can be arranged within the box. In this way, elements can be dis­trib­uted in relation to one another. CSS Flexbox then also ensures that the space sur­round­ing these elements is filled in a sensible way.

Anyone who designs websites nowadays should look into CSS Flexbox because the tech­no­logy makes it much easier to work with various screen sizes. The feature is struc­tured in such a way that one can even produce appealing results with just a few lines of code.

Flexbox is based on a container (flex container) in which several elements (flex items) are housed. The container lends its prop­er­ties to the elements – in other words, the elements are the actual Flexboxes, which retain their flex­ib­il­ity by being inside the container.

Both axes have a direction: normally, the main axis runs from left to right, the cross-axis from top to bottom. Flexbox is described as a one-di­men­sion­al system: elements can be arranged either in lines or in columns. A com­bin­a­tion is not provided. If one chooses, for example, the line ar­range­ment (which is also the standard), CSS Flexbox will try to arrange all elements in a series. One can also inhibit this, and in a sense force a line break.

Before you begin to arrange elements, you need to create them first using HTML:

In this way, the three elements would be displayed beneath each other. Using CSS, we can now dis­trib­ute the terms across the main axis:

The container in this style sheet was defined at the beginning. The “display: flex;” command enables the Flexbox. The elements are dis­trib­uted from left to right, as we have not defined them dif­fer­ently. However, to modify the dis­tri­bu­tion, five different options can be set with the “justify-content” command:

• flex-start: left-justified
• flex-end: right-justified
• center: centered
• space-around: equally dis­trib­utes the space sur­round­ing the boxes
• space-between: equally dis­trib­utes the space between the boxes

The remaining code is only cosmetic and has nothing to do with the actual Flexboxes.

With Flexbox, CSS ori­gin­ates from a ho­ri­zont­al alignment. It is also possible, however, to arrange the elements in a column. In addition, one can reverse the direction – from left to right or from bottom to top. For this purpose, one uses the “flex-direction” command:

• row: left to right
• row-reverse: right to left
• column: top-down
• column reverse: bottom-up

At the same time, the “justify-content: flex-end;” command does not mean the same thing as “flex-direction: row-reverse;”. Using the first variant, one places the last element to the right, while the second variant changes the order. The first element in the code would thus appear to the right.

Up until now, we have dis­trib­uted the Flexboxes equally. However, if you prefer not to have to handle all the objects at the same time, you can merge the elements in the HTML text. That’s useful if, for example, a text needs to be displayed dif­fer­ently than an image:

Using “justify-content”, elements can be placed in a specific re­la­tion­ship with one another other than on the ho­ri­zont­al axis. If one would like to move their content from top to bottom (on the cross-axis), however, one needs the “align-items” command. There are five different options:

• center: objects are centred
• flex-start: objects are justified on the top margin
• flex-end: objects are justified on the bottom margin
• stretch: objects are pulled to the same size
• baseline: objects are arranged on the baseline (dependent on the content)

Both the “flex-start” and “baseline” options seem to yield the same result at first glance. The dif­fer­ence emerges when objects are nested. While “flex-start” only links the two Flexboxes together which lie on the same hierarchy level, “baseline” also takes into account the content of the boxes.

With the following code you can arrange three objects of different sizes so that they are centred next to each other:

The vertical spread can also be in­flu­enced via a line break. If one packs many objects into a container, these would always continue to run ho­ri­zont­ally so that the user must scroll and so that the actual screen that’s been provided is abandoned. With “flex-wrap”, you can ensure that elements are dis­trib­uted properly across several lines.

• nowrap: no line break
• wrap: line break
• wrap-reverse: line break (with ar­range­ment in reverse order)

Up to now, the ar­range­ment has always been applied to the entire container. All boxes within the container adhere to the global command. This makes the work easier, but it’s also re­strict­ing. That’s why CSS Flexbox provides web designers with the option to define ex­cep­tions by using “order.” The standard value (if it isn’t spe­cific­ally defined this way) is 0. The ordering value adds the object to an abstract group. All elements that we have created up to now belong to the same group, as all have the value 0. Pro­ceed­ing from this value, one can only move in­di­vidu­al objects forward (-1) or backward (1).

Therefore, if you choose to add a value of 1 to a single selected object, it will only be displayed after the other elements which were left at 0. But you can assign other (higher or lower) values. It’s a matter of visual rep­res­ent­a­tion: the logical result (according to the HTML document) remains unchanged.

So far, we have only addressed the flexible ar­range­ment of objects. The size ratios in the code example were regulated using classic CSS. Flexboxes, however, are ad­justable with regard to their size. For this purpose, the “flex” command is used. Similar to ordering, elements can be cat­egor­ized into groups in this way. The larger the value, the more space the re­spect­ive element demands.