Flexbox

Flexbox is more flexible than the float property. If flexbox is used it is recommended to keep it flexible and not write too much CSS statements which could limit it’s flexibility.

The general layout is based on one flexbox container which contains all the elements that should be positioned flexible. Width and height of the items inside this container are defined (responsive) by the content and the screen size.

The CSS code for activating a flexbox on a container is

display: flex;
.flex-container {
    display: flex;
}

It is applied to a parent container which contains all the elements:

<div class="flex-container">
    <div>
        content of div 1
    </div>
    <div>
        content of div 2
    </div>
</div>

Wrap all the div containers of your page into a parent div container with the class flex-container and insert the styling from above into style.css.

Probably it looks a little bit strange:

flexbox_div

This happens because the div tag has a styling and this is applied to the parent div with class flex-container as well.

We’ll specify that the div styling is applied to the div elements inside the parent div only:

div {
    width: 32vw;
    background-color: rgb(132, 202, 140);
    border: 1px solid white;
    margin: 10px;
    padding: 50px;
}

becomes

.flex-container div {
    width: 32vw;
    background-color: rgb(132, 202, 140);
    border: 1px solid white;
    margin: 10px;
    padding: 50px;
}

flexbox_div_child

Next we’ll allow the inner elements to wrap so that they’re not placed all in one row.

.flex-container {
    display: flex;
    flex-wrap: wrap; /* options: wrap, nowrap, wrap-reverse */
}

flexbox_wrap

See more options for the flex container.

Overview

/* Activate flexbox on a container. */
.flex {
    display: flex;
}

/* Direction. */
.flex {
    display: flex;
    flex-direction: row; /* default */
    flex-direction: column; /* stack */
    flex-direction: row-reverse;
    flex-direction: column-reverse;
}

/* Align inner items. */
.flex {
    display: flex;
    justify-content: flex-start; /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
}

/* Wrap items in additional rows if necessary. */
.flex {
    display: flex;
    flex-wrap: wrap;
}

Responsive Flexbox

With flexbox it’s possible to define the behaviour of a layout in relation to the screen size of the viewer. Depending on the screen width the flex-direction switches between row and column.

.flex-container {
    display: flex;
    /* default flex-direction is row */
}

@media (max-width: 992px) {
  .flex-container {
      flex-direction: column;
  }
}

Accordingly the size of the items inside the flex-container will adapt:

.flex-container > div {
    flex: 30%;
}

@media (max-width: 992px) {
    .flex-container > div {
        flex: 100%;
    }
}

This leads to a 3 column layout on large devices and a 1 column layout on small devices.

flexbox_responsive_lg



flexbox_responsive_sm

The corresponding code:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Writing an own website</title>
        <link rel="stylesheet" href="css/fonts.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

        <div class="flex-container">

            <div>
                <h1>writing<br>an own<br>website</h1>
            </div>

            <div>
                <h2>A flower needs some water</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div>
                <span class="img-center-helper"></span><img src="img/radematic_com.jpg" alt="screenshot of radematic.com" width="600" height="auto">
            </div>

            <div>
                <h2>A computer <i>needs</i> some code</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div>
                <span class="img-center-helper"></span><img src="img/mschf_xyz.jpg">
            </div>

            <div>
                <span class="img-center-helper"></span><img src="img/designsystems_international.jpg">
            </div>

            <div>
                <a href="https://terra0.org" target="_blank" style="background-color: unset;">
                    <span class="img-center-helper"></span><img src="img/terra0_org.jpg">
                </a>
            </div>

        </div>
    </body>
</html>

style.css

* {
    box-sizing: border-box;
}

body {
    font-family: 'Vollkorn';
    font-size: 1.5em;
    background-color: rgb(185, 195, 182);
    margin: 0;
}

.flex-container {
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
    justify-content: space-around;
}

.flex-container div {
    flex: 30%;
    background-color: rgb(10, 34, 12);
    border: 2px solid salmon;
    padding: 50px;
}

@media (max-width: 992px) {
  .flex-container {
      flex-direction: column;
  }
  .flex-container div {
      flex: 100%;
  }
}

.flex-container div, p, img, video {
    border-radius: 10px;
}

h1, h2 {
    font-family: 'Montserrat';
    color: salmon;
    text-align: center;
}

h1 {
    font-size: 3.5vw;
}

h2 {
    font-size: 32pt;
}

p {
    padding: 10px;
    color: snow;
    text-align: justify;
    text-indent: 16pt;
}

a {
    text-decoration: none;
}

.img-center-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    width: 100%;
    vertical-align: middle;
}

The space between the items is not defined via margin. Instead it’s defined in the parent flex-container:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 20px;
    /* or both in one line:
    gap: 10px 20px; */
}