Learn
Flexbox
flex-direction

Up to this point, we’ve only covered flex items that stretch and shrink horizontally and wrap vertically. As previously stated, flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.

The main axis is used to position flex items with the following properties:

  1. justify-content
  2. flex-wrap
  3. flex-grow
  4. flex-shrink

The cross axis is used to position flex items with the following properties:

  1. align-items
  2. align-content

The main axis and cross axis are interchangeable. We can switch them using the flex-direction property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.

<div class="container"> <div class="item"> <h1>1</h1> </div> <div class="item"> <h1>2</h1> </div> <div class="item"> <h1>3</h1> </div> <div class="item"> <h1>4</h1> </div> <div class="item"> <h1>5</h1> </div> </div>
.container { display: flex; flex-direction: column; width: 1000px; } .item { height: 100px; width: 100px; }

In the example above, the five divs will be positioned in a vertical column. All of these divs could fit in one horizontal row. However, the column value tells the browser to stack the divs one on top of the other. As explained above, properties like justify-content will not behave the way they did in previous examples.

The flex-direction property can accept four values:

  1. row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
  2. row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
  3. column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
  4. column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

Below, we’ll investigate how these work.

Note: The flex-direction property is declared on flex containers.

Instructions

1.

Give the div with id #row a flex-direction of row.

2.

Give the div with id #row-reverse a flex-direction of row-reverse.

3.

Give the div with id #column a flex-direction of column.

4.

Give the div with id #column-reverse a flex-direction of column-reverse.

5.

Change the height property of .container elements to be max-height. Remember to stretch and shrink the browser after each checkpoint so you can see the effects.

6.

Set the align-items value of the .container div to center.

7.

Set the justify-content value of the .container div to space-around.

8.

Set the flex-grow property of .box divs to 1. In which direction do the elements grow?

Folder Icon

Take this course for free

Already have an account?