Today we will learn how to format text in columns. We already know how to format text in lines.

Memories

How do we usually format text in lines? For example, like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
    
<div class="row">
    <div class="block">
        This is where the dog lives 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block">
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

<style>
    .row {
        display: flex;
    }
    
    .block {
        border: 1px solid black;
        margin: 0.25em;
        padding: 0.5em;
    }
</style>

</body>
</html>

By default, all animals take up exactly as much space as they need.

If I want each one to take up a specific amount of space, I add the property flex-grow: 1.

<div class="row">
    <div class="block" style="flex-grow: 1;">
        this is where the dog lives 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block"  style="flex-grow: 1;">
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block"  style="flex-grow: 1;">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

In this case, as you remember, there is an even distribution of empty space.

That is, if I want the sizes to be even, I add flex-basis: 0.

<div class="row">
    <div class="block" style="flex-basis: 0; flex-grow: 1;">
        This is where the dog lives. 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 1;">
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 1;">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

and everything lines up nicely:

Now let’s see how it all works when I do a column layout.

Column layout

To do a column layout, you need to add the flex-direction: column property, like this

<style>
    .block {
        /* ... */
    }

    .column { /* renamed to column, don't forget to rename above, where class="row" */
        display: flex;
        flex-direction: column; /* added */
    }
</style>

and immediately everything turns into a column

Let me try to make the cat take up twice as much space:

<div class="column">
    <div class="block" style="flex-basis: 0; flex-grow: 1;">
        this is where the dog lives 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 2;"> <!-- replaced here with flex-grow: 2; -->
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 1;">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

Let’s check:

Hmm, what’s going on here?

The thing is, vertical layout has a minor problem, which is that the browser doesn’t really have a clear concept of height.

That is, 100% width is always clear, from the left edge to the right. But 100% height is not clear how to calculate. Is it from the top of the visible part of the page to the bottom of the visible part of the page, or to the bottom if you scroll, or something else? It’s unclear in general.

Therefore, when laying out vertically, it is always important to specify the height of the column. For example, I will specify that the height of my column is 300px

<div class="column" style="height: 300px">  <!-- added height: 300px -->
    <div class="block" style="flex-basis: 0; flex-grow: 1;">
        a dog lives here 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 2;">
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block"  style="flex-basis: 0; flex-grow: 1;">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

Oh, and everything worked right away

flex-basis: 0; behaves exactly the same as in horizontal layout, i.e. without it, there will be an attempt to distribute empty space:

The difference is not very noticeable here, but it is there.

Aligning blocks within a column

In reality, vertical rubber blocks are not often needed. Right now, we have a dog, a cat, and a kiwi all in rubber blocks. But the rubber is very conditional, since the height of the parent block is fixed

Let me remove flex-grow and flex-basis from the blocks and add colour to the column

<div class="column" style="height:300px;  background-colour: rgb(167, 242, 255);">
    <div class="block" style="">
        this is where the dog lives 
        <i class="fas fa-2x fa-dog"></i>
    </div>

    <div class="block"  style="">
        <i class="fas fa-2x fa-cat"></i>
    </div>

    <div class="block"  style="">
        <i class="fas fa-2x fa-kiwi-bird"></i>
    </div>
</div>

The result will be as follows

And now I will take advantage of the incredible opportunity to align the content within the block. To do this, there is a property called align-items, which determines how blocks are aligned horizontally within a column block.

By default, it has a value of stretch

.column {
    align-items: stretch; /* added, specified the default value*/
    display: flex;
    flex-direction: column;
}

and by changing it, I can change how the blocks are aligned horizontally inside:

For example, align-items: flex-start;

or align-items: centre;

or at the end if I want to drive them align-items: flex-end;

But the best part is that we can control the position of blocks not only horizontally, but also vertically. To do this, we use the justify-content property. By default, it has the value flex-start, which means aligning at the top of the block

.column {
    justify-content: flex-start; /* added */
    align-items: flex-end; 
    display: flex;
    flex-direction: column;
}

But I can also ask it to align to the centre

.column {
    justify-content: centre; /* changed to centre */
    align-items: flex-end; 
    display: flex;
    flex-direction: column;
}

and if you also do align-items: centre;:

you can also move it down

.column {
    justify-content: flex-end; /* changed to flex-end */
    align-items: centre; 
    /* ... */
}

There is also an interesting mode that evenly distributes the distance between blocks, almost like flex-grow, except that the blocks take up exactly as much space as they need:

.column {
    justify-content: space-between; /* changed to space-between */
    align-items: centre; 
    /* ... */
}

There is also this:

.column {
    justify-content: space-around; /* changed to space-around */
    align-items: centre; 
    /* ... */
}

and this one:

.column {
    justify-content: space-evenly; /* changed to space-evenly */
    align-items: centre; 
    /* ... */
}

![] (https://i.imgur.com/WtDf6Xd.png)

Using these properties, you can quickly and beautifully align the content of any block.

Several columns in a row

Of course, a single column is not very interesting, and it is much more interesting to combine columns into rows. Using the horizontal flex we are already familiar with.

Let’s say I want three columns in a row. First, I’ll just copy the block with the column three times:

<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
    <!-- ... -->
</div>

<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
    <!-- ... -->
</div>

<div class="column" style="height:300px; background-colour: rgb(167, 242, 255); ">
   <!-- ... -->
</div>

it will put all three columns into one mega column (i.e. each column will be below the next one), because this is the standard behaviour of div blocks, and in fact I will get a column three times higher.

To put the columns in a row, I’ll wrap everything in a regular flex block, like this

<div style="display: flex;">
    <div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
            <!-- ... -->
	</div>

    <div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
            <!-- ... -->
    </div>

	<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
         <!-- ... -->
    </div>
</div>

And hurray, now there are three columns in a row:

I can specify how to place blocks in each column

<div style="display: flex;">
    <div class="column" style="justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
        <!-- ... -->
    </div>

    <div class="column" style="align-items: stretch; justify-content: space-evenly;  height:300px; background-colour: rgb(167, 242, 255);">
        <!-- ... -->
    </div>

    <div class="column" style="align-items: flex-end; justify-content: flex-end; height:300px; background-colour: rgb(167, 242, 255);">
        <!-- ... -->
    </div>
</div>

This is how it will look

On a large screen, they will most likely not take up the entire line

If you want them to stretch across the entire width, just add the property flex-grow: 1 to each column. I also changed the colour of each one here to make it easier to see

<div style="display: flex;">
    <div class="column" style="flex-grow:1; justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
        <!-- ... -->
    </div>

    <div class="column" style="flex-grow:1; align-items: stretch; justify-content: space-evenly;  height:300px; background-colour: rgb(126, 171, 255);">
        <!-- ... -->
    </div>

    <div class="column" style="flex-grow:1; align-items: flex-end; justify-content: flex-end; height:300px; background-colour: rgb(171, 147, 255);">
        <!-- ... -->
    </div>
</div>

Columns behave the same way as regular blocks. That is, I can ask the second column to be twice as thick as the others if I specify flex-grow: 2 for it.

<div style="display: flex;">
    <div class="column" style="...">
        <!-- ... -->
    </div>

    <div class="column" style="flex-grow:2; align-items: stretch; justify-content: space-evenly;  height:300px; background-colour: rgb(126, 171, 255); ">
        <!-- ... -->
    </div>

    <div class="column" style="...">
        <!-- ... -->
    </div>
</div>

Here again, empty space will be distributed. If you want it to be clear, add flex-basis: 0

<div style="display: flex;">
    <div class="column" style="flex-basis: 0; ...">
        <!-- ... -->
    </div>

    <div class="column" style="flex-basis: 0; flex-grow:2; ...">
        <!-- ... -->
    </div>

    <div class="column" style="flex-basis: 0; ...">
        <!-- ... -->
    </div>
</div>

If you want specific sizes, specify them in pixels in the flex-basis property, while removing flex-grow:

<div style="display: flex;">
    <div class="column" style="flex-basis: 100px; justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
        <!-- ... -->
    </div>

    <div class="column" style="...">
        <!-- ... -->
    </div>

    <div class="column" style="...">
        <!-- ... -->
    </div>
</div>

In general, everything is as usual, just like in the previous task. Well, you can start working on the task =)

Task

Layout it like this

If necessary, there are three lines here, and each column in the line has a fixed width and height, i.e. we do not set flex-grow for the columns.