はじめに

CSSのフレックスボックスのプロパティを勉強のためにまとめました。
第一弾として、下記の動作を確認しました。
　・flex-direction（主軸方向の設定）
　・justify-content（左右の配置指定）
　・align-items（上下の配置指定）

初期状態

index.html

<body>
    <div class="container">
        <div class="flexItem_1">
            <p>1</p>
        </div>
        <div class="flexItem_2">
            <p>22</p>
        </div>
        <div class="flexItem_3">
            <p>333</p>
        </div>
    </div>
</body>

style.css

.container{
    border: 5px pink solid;
}

.container>div{
    padding: 10px;
    margin: 10px;
}

.flexItem_1{
    background-color: greenyellow;
}

.flexItem_2{
    background-color: yellow;
}

.flexItem_3{
    background-color: red;
}

containerにflexを追加してフレックスボックスにする

style.css

.container{
    border: 5px pink solid;
    display: flex; /*  display: flex を追加 */
}

〇flex-direction（主軸方向の設定）

・row(規定値)

style.css

.container{
    (省略)
    flex-direction: row;
}

・columon

style.css

.container{
    (省略)
    flex-direction: column;
}

・row-reverse

style.css

.container{
    (省略)
    flex-direction: row-reverse;
}

・columon-reverse

style.css

.container{
    (省略)
    flex-direction: column-reverse;
}

〇justify-content（左右の配置指定）

・start

style.css

.container{
    (省略)
    justify-content: start;
}

・center

style.css

.container{
    (省略)
    justify-content: center;
}

・end

style.css

.container{
    (省略)
    justify-content: end;
}

・space-between

style.css

.container{
    (省略)
    justify-content: space-between;
}

・space-around

style.css

.container{
    (省略)
    justify-content: space-around;
}

・space-evenry

style.css

.container{
    (省略)
    justify-content: space-evenry;
}

〇align-items（上下の配置指定）

高さが必要なので、containerの高さを変更

.container{
    border: 5px pink solid;
    display: flex ;
    height:200px;
}

・strech

style.css

.container{
    (省略)
    align-items: strech;
}

・center

style.css

.container{
    (省略)
    align-items: center;
}

・start

style.css

.container{
    (省略)
    align-items: start;
}

・end

style.css

.container{
    (省略)
    align-items: end;
}

おわりに

今回確認したのは３つのプロパティのメインどころだけですが、
それでも沢山あるので使いこなせるか不安です。。。
使えるようになるまで精進します。