CSS Flexbox made simple (Part 1)



display: flex;

This is used to create a flex container which becomes flexible. This is when the display property is given the value of 'flex' as shown above.
The default value of the flex container is row. What this means is where items in the container were otherwise in a column, i.e. vertically or on top of each other, these will default as rows in the flex container. This can be adjusted using the flex-direction property.

EXAMPLE:

flex-direction: column;
This would make the items align in a column as opposed to the default row like when display: flex; is not used. This is shown in the code example section.

Code Example:

This shows the HTML used to help explain how the flexbox works. Here, the flexbox is within a flex-box container. This will be shown in the CSS which will be applied to the id of flex-container. The parent div is given the id of flex-container. Inside of this flex-container are two further div tags, one of which has an id of first and the second an id of second. These will be used to create two boxes within the flex-container to show how flexbox can be used.

HTML for the flexbox examples

This shows the CSS used to help explain how the flexbox works. Here, the styling is applied to the id of flex-container which, as shown above, was the id to the parent div. The flex-container (flexible container) is created with the display: flex; as shown below. The container is given a height: 500px; and the background of the flex-container is set to a background-color: #CCC; which is a light grey as can be seen in the preview on the right.

Example CSS for flexbox

Now that the flex-container is visible we can show how the flexbox works.

Example CSS for flexbox

display: flex; has been used here. This creates the flex-container and the default value of this is row. When this is not used the result will be as shown below where display: flex; has been commented out.

display: flex; commented out and preview (without flex)

Changing the direction in which the flex items are stacked (using flex-direction)

The previous section covered how display: flex; works. You can change the direction in which the flex items are stacked using the property flex-direction.

Example:

1. flex-direction: column; is added to the #flex-container

flex-direction: column;

The flex items are stacked in a column as shown above.
2. flex-direction: column-reverse;
This reverses the order in which the columns are stacked.

flex-direction: column-reverse;

3. flex-direction: row;
This stacks the flex-items horizontally.

flex-direction: row;

4. flex-direction: row-reverse;
This reverses the order in which the rows are stacked.

flex-direction: row-reverse;

Part 1 covered display: flex; and the flex-direction property. If you have any questions on part 1 post them below!