More about flexbox

Go back to HTML and CSS Index

Last time, we had a look at how many things we could actually accomplish by declaring display: flex on a parent container and using the properties like flex-diection, justify-content, align-items and flex-wrap.

Even though these properties gives us tons of possibilities to create a responsive layout, we can do even more by also using properties from the Flexbox module on the children.

display: flex

When using display: flex on a parent container, you get some new properties to play around - both for the parent and the child/children. The children of the flex container are every element nested directly inside that element. Lets have a look at an example:

The HTML

<section class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
</section>
7.10 | Creating a flex container

In the example above, the 3 divs are children of the flex container.

If you want to move one of those children around in a different way than the rest, you can do so by using either css pseudo-classes or by given the one, that you want to style differently a class or an id:

The HTML

<section class="flex">
<div>1</div>
<div id="different">2</div>
<div>3</div>
</section>
7.11 | Adding an id to one of the elements

Now that we have that taken care of, let's try styling it differently.

The order property

All elements have the standard order value 0, meaning that they show up in the same order as they are marked up in the HTML.

If we want to change that order, we use the order property and set it to a value either higher (moving the element to the back/bottom) or below 0 (moving it to the top/front):

.flex {
display: flex;
}
#different {
order: 1;
}
7.12 | The order property

Example of order: 1

1
2
3

Example of order: -1

1
2
3

The align-self property

.flex {
display: flex;
}
#different {
align-self: flex-start | flex-end | center | baseline | stretch
}
7.12 | The align-self property

Example of align-self: center

1
2
3

Example of align-self: flex-end

1
2
3

The flex-grow and flex-shrink properties

The flex-grow property defines the ability for a flex item to grow if necessary, the flex-shrink - to shrink:

.flex {
display: flex;
}
#different {
flex-grow: 2;
}
7.13 | The flex-grow property

Example of flex-grow: 2

1
2
3

Next up

Now that we have had a look at how to create flexible grids, we might also want to look at how to use them in connection with responsive web design.

Next up: Responsive Web Design (RWD)