Training

Boost Your Online Business

About the Genial Flexbox Model for Website Design Newbies

To keep the flexbox model clear for you as a beginner, this presentation focuses on the visual representation. You will be shown or described three different flexbox basic settings that a webpage can contain. But first, two important details you should know about flexbox.

Simplification of Web Design

The beauty of the flexbox model is that it can greatly simplify your web design for PCs. Of course, this also applies to smartphones and other devices. So there are fewer hurdles even for HTML/CSS beginners. The result: you save time when creating and maintaining your website.

Compatibility with Browsers

Also, it's good to know that the relatively new flexbox model is supported by all modern browsers. Since June 2020, even Windows 7 & 8 users can see Flexbox websites with the new Edge browser. Thus, it can be assumed that visitors of a flexbox website will have a good visual user experience.

Now to the Basics of Flexbox

There are different basic settings. I will now show how the flexbox model works using only three basic settings. Flexbox is easiest to understand by a visual representation of the elements of a website through boxes. The boxes shown later contain content, for example text or images.

1. Fixed Elements

All elements have the same or a certain size. The boxes are placed as a row horizontally next to each other on the left side. This is the default or the basic setting of flexible boxes for fixed elements.

Flexbox Boxen, begrenzte Göße
Screenshot: Flexbox boxes, limited size

2. Flexible Elements

In this second variation, the boxes are unlimited in width and height. This makes them flexible. The boxes therefore adapt dynamically and evenly to the available space of the row. This is the default for flexible boxes.

Flexible Boxes, unbegrenzt
Screenshot: Flexible boxes, unlimited size

3. Vertikal Smartphone Screen

Both previous examples assumed a horizontal display. With the smartphone, little space may be available horizontally when the screen is held vertically. The flexbox model has another basic setting for this: the column. Thus, the boxes of 1./2. are rotated by 90 degrees or ¼. The example shown here assumes flexible boxes (2.), since they take up the entire horizontal space (width) of both the column and the row (see the border).

Flexible Boxes, begrenzte Höhe, Smartphone
Screenshot: Flexible boxes, limited height, Smartphone

How to Continue...

That was a brief introduction to the flexbox model. Besides these basic settings, there are other options for arranging content of a page.

If you want to know more about this topic or if you want to use flexbox for your website, then I recommend you take a look at the Flexbox Website Design Video Course. I have developed this course for you to independently design your own website design.

In this video course you will learn how to place content on a homepage in many ways using flexbox in combination with a method for designing your pages. The course is suitable for both beginners and advanced users. With the video course you will get not only an e-manual but also an optimized framework for easy implementation and fast results.

Autor/in: Iris Mitlacher