home
No code to 
<know code>

Flexbox

Introduction

We have a table and four plates. We will learn how to align the plates differently for our guests by using Flexbox

Each plate is width: 150px height:100px

Block

Let's put the food on the table.

Block elements start on a new line and take up the full width available.
Each plate (food image) is 150px and the table is width:750px; height 400px;

Flex - horizontal

Flex lays out its child elements on horizontal or vertical axis. Horizontal is default.

Note that the CSS name is row not horizontal

.c-table {
   display: flex;
   /* Default flex-direction */
   flex-direction: row;
}

Flex - vertical

Flex lays out its child elements on horizontal or vertical axis.

Note that the CSS name is column not vertical

.c-table {
   display: flex;
   /* Default flex-direction */
   flex-direction: row;
}


.c-table {
   display: flex;
   flex-direction: column;
}

Bigger plates 1: width 50%

Let's make the images bigger. We make the image width 50%. The problem is that flexbox does not move plates onto the next row if there is no space available.

.c-plate {
   width: 50%;
}

Bigger plates 2: wrap

To fit all the plates on the table we need to change the table div to wrap

.c-table {
   display: flex;
   flex-wrap: wrap;
}

Bigger plates 3: height

You might be wondering, why there is a space between each row of plates? Well, that's a good question. By default, flex items stretch in the cross axis because the default value for the table is align-items: stretch. In our case, the plates has a fixed height. Let's remove it and see how the result will look.

Read about CSS height

.c-plate {
   width: 50%;
   height: initial;
}

Align child content

Let's take a look at how we can align content with Webflow.

For children align to work we need to have layout: wrap on the children (the plates) of the parent (table).

See what happens when you choose:

Start
Centre
End
Align rows: Stretch
Align rows: Space between
Align rows: Space around

Justify child content

Let's take a look at how we can justify content with Webflow.

We've made the plates the normal size again.


See what happens when you choose:

Start
Centre
End
Space between
Space around

Align baseline child content

Let's take a look at how we can align content to the baseline with Webflow.

For this we need text to demonstrate.

See what happens when you choose:

Start
Centre
End
Space between
Space around

Burger

A delicious American style burger.

Noodle

Delicious Chinese noodles.

Pizza

Authentic Italian American pepperoni pizza

Turkey

Thanksgiving turkey with all the trimmings.

Asset library