Set flex direction

Hello Everyone Today we will learn how to work flex direction.

Here's the starter code for the example we'll be using in the following chapters.

HTML

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS

* {
    font-family: Helvetica;
    font-size: 1.4em;
    color: white;
    text-align: center;
}

.container {
    border: 2px solid black;
}

.item {
    width: 100px;
    height: 70px;
}

.container div:nth-child(1), div:nth-child(6) {
    background-color: #00BFB8;
}

.container div:nth-child(2), div:nth-child(7) {
    background-color: #8E007E;
}

.container div:nth-child(3), div:nth-child(8) {
    background-color: #23D0EA;
}

.container div:nth-child(4) {
    background-color: #EF8956;
}

.container div:nth-child(5) {
    background-color: #060A3D;
}

There is a container div that contains 6 items. To be as clear as possible, each item has a class of item. Each is also 100px wide and 70px tall with a different background color.

There is also a black border around the containing div. This will help you visualize the relationship between the flex items and the flex container.