Flexbox

Flexible organizing with flexbox

CSS is used to order and style HTML elements. A big part of this is organising elements in a visually attractive way. This can be done using flexbox.

What it does is helping you to think according to grid-based web design: elements are not randomly placed on the page, but are neatly organised along a grid.

Read the following to learn more about 'grid-based web design':

• Introduction to grids in web design

• Grid Systems in Web & UI Design

Once you understand this way of thinking you'll know why it makes sense to use flexbox.

In order to make use of it we have to access it through the display CSS property:

display: flex;

This will give us the flexbox-specific properties, so we can develop clean and organised CSS. Check the following links to understand how this is done:

• CSS Flexbox in 100 Seconds

• What is Flexbox and Why to Learn it

• CSS Flexbox Course

Flexbox Layout - Example:

Create a flexbox layout:

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #444;
    padding: 10px;
}
.flex-item {
    background-color: #888;
    color: white;
    padding: 20px;
    margin: 10px;
}

Further Resources:

• Learn Flexbox CSS in 8 minutes (Youtube)

---

Help us improve the content 🤩

You can leave comments here.