屈曲方向を設定する

こんにちは皆今日、我々はどのようにフレックス方向を働かせるかを学びます.
以下の章で使用する例のスターターコードです.


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;
}

6つのアイテムを含むコンテナのdivがあります.できるだけ明らかにするには、各項目の項目のクラスがあります.各100 px幅と70 pxの別の背景色と高いです.
また、これは、フレックスアイテムとフレックスコンテナーの間の関係を視覚化するのに役立ちます含まれた部門の周りに黒の境界線です.