Lesson 23 - Bootstrap - Flex utilities

In the previous lesson, Bootstrap - Utilities, we introduced all the utilities of the Bootstrap CSS framework, except the flexbox ones. We're going to focus on flexbox in today's and the following tutorial.

Flex

Arrival of Flexbox to the CSS3 standard caused a fundamental change of how we position elements. That's no surprise since positioning was not implemented in CSS back then and all the existing solutions of composing something in the page were just hacks. Tricks were used such as setting elements to render as tables because that was the only way to center something vertically, we had to think about the element type before we could center it horizontally and depending on that we chose to set the automatic margin or to wrap it in a wrapper.

Fortunately, these dark times of webdesign are now over. Flexbox can position and, mainly, center anything on the page in one universal way. It's no surprise that Bootstrap implemented a lot of classes based on it which can be used to position elements simply just by assigning a class, without any unnecessary overthinking

Flex container

The basic principle of flexbox is applying the display: flex property on some container. This container then gets the ability to position items placed inside. It's the container what changes the position of the items, not the items themselves. That's an important principle on which the whole technology is built. We typically use the <div> element to create the container and assign the .d-flex class to it. We already know that the letter "d" in the class name points to the fact that it modifies the display property. To create an inline container, we can assign the .d-inline-flex class instead of .d-flex. By default, the items are placed from left to right and are stretched evenly to fill the whole width of the container.

A flex container could look e.g. something like this:

<div class="d-flex"></div>

To create a container we can use the following responsive classes as well:

• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

The item direction

The next step is to set the direction of the items, how they should be arranged if there is more of them in the container. If you want only to center something and there's just one item in the container, the direction specifies in which direction it will center. To specify the direction we use the classes:

• .flex-row - The horizontal direction (to the row, left to right), the default value if we don't assign any class
• .flex-row-reverse - The horizontal reverse direction (to the row, right to left)
• .flex-column - The vertical direction (to the column, top to bottom)
• .flex-column-reverse - The vertical reverse direction (to the column, bottom to top)

Again, we can use the responsive versions of the classes above which apply the behavior only from a specified size of the viewport:

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Content alignment

Once we defined the direction of the main axis by class, we can specify how should the content in this direction be aligned. Since the direction can be both horizontal or vertical, we use the terms "start" and "end" instead of terms such as "top" or "bottom". To specify the alignment we use the following classes:

• .justify-content-start - aligns from the start to the end, that's the default value if we didn't assign any class
• .justify-content-end - aligns from the end to the start
• .justify-content-center - aligns to the center
• .justify-content-between - fills the whole space with the items, gaps are placed equally between them, there are items on the sides
• .justify-content-around - fills the whole space with the items, gaps are placed equally between them, there are gaps on the sides

Let's try out the values:

<p>justify-content-start:</p>
<div class="d-flex justify-content-start">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>justify-content-end:</p>
<div class="d-flex justify-content-end">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>justify-content-center:</p>
<div class="d-flex justify-content-center">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>justify-content-between:</p>
<div class="d-flex justify-content-between">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>justify-content-around:</p>
<div class="d-flex justify-content-around">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

A live demo in the browser:

If we set the direction of the main axis to vertical using the .flex-column class, we can achieve the real vertical alignment:

Item alignment

Item alignment is nothing else but the content alignment of the second axis. If we have a row flexbox, it sets the vertical alignment, otherwise it sets the horizontal alignment. We can specify it using the classes:

• .align-items-start-stretch - the items stretches through the whole height/width of the container, it's the default value if we didn't assign any class
• .align-items-start-start - aligns from the start to the end
• .align-items-start-end - aligns from the end to the start
• .align-items-start-center - aligns to the center
• .align-items-start-baseline - The same as start, but aligns by the text baseline. If the items have different font size, they will be all aligned on the same level from the start of the container.

Again, we have the responsive classes as well, as follows:

• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Let's try the values:

<p>align-items-stretch:</p>
<div class="d-flex align-items-stretch bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-items-start:</p>
<div class="d-flex align-items-start bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-items-end:</p>
<div class="d-flex align-items-end bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-items-center:</p>
<div class="d-flex align-items-center bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

The result in the browser:

We can, of course, combine different alignments, meaning e.g. align to the center both vertically and horizontally:

<div class="d-flex align-items-center justify-content-center bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

The result:

Align self

You think there are too many alignments already? Well, there's one more Align-self, as you can guess from the name, doesn't specify how the items are aligned to the container but to the other items in the container's row or column. We do not assign these classes to the container, as in the previous cases, but to the items of the container themselves.

We can assign the classes:

• .align-self-stretch - Stretches the item through the second axis, that's the default value if we don't assign any of the classes
• .align-self-start - Aligns the item to the start of the second axis of the row/column.
• .align-self-end - Aligns the item to the end of the second axis of the row/column.
• .align-self-center - Aligns the item to the center of the second axis of the row/column.
• .align-self-baseline - Aligns the item to the start of the second axis of the row/column, depending on the text baseline. If we use the same font for all the items, it works the same way as .align-self-start. If we choose fonts of different sizes, all the items will be aligned on the same level from the start of the second axis of the row/column.

The responsive variants of the classes are defined as follows:

• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

<p>align-self-stretch:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-stretch">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-self-start:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-start">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-self-end:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-end">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-self-center:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-center">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<p>align-self-baseline:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-baseline">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

The live demo:

Combining flex with margin:auto

If we set margin-{some-side}: auto to an element in a flex container, all the following items will be aligned to the end of the given side. If we e.g. assign the .mr-auto class to the element (setting the right margin to the auto value) and the container is a row with the alignment to the start, all the following elements will be rendered sticked to the right side. We can achieved a similar behavior in a column container as well, by setting the auto value to the top or the bottom margin which will cause the following items to move to this side.

<div class="d-flex bg-warning">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="mr-auto bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>
<br />
<div class="d-flex flex-column bg-warning" style="height: 250px;">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="mt-auto bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

The result:

In the next lesson, Bootstrap - Flex utilities 2, we'll finish the description of flex utilities.