【CSS初学者】フレックスボックスのプロパティ学習①

# はじめに
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;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/6a003db7-6d39-c0a1-539e-2aab403fa43a.png)


# containerにflexを追加してフレックスボックスにする
```style.css
.container{
    border: 5px pink solid;
    display: flex; /*  display: flex を追加 */
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/c87cc409-6156-24fd-6ec1-952d2b1c1df4.png)

## 〇flex-direction（主軸方向の設定）
### ・row(規定値)
```style.css
.container{
    (省略)
    flex-direction: row;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/8d655a92-e59e-ea2d-4e74-2775ee2b74a5.png)
### ・columon
```style.css
.container{
    (省略)
    flex-direction: column;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/c2dfb90b-7206-0ef3-e422-f9c2125d8506.png)
### ・row-reverse
```style.css
.container{
    (省略)
    flex-direction: row-reverse;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/28d48892-6513-850d-cc56-f0b101f7a040.png)
### ・columon-reverse
```style.css
.container{
    (省略)
    flex-direction: column-reverse;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/5abdf37a-8a87-c0ff-3e28-25c25b83491a.png)

## 〇justify-content（左右の配置指定）
## ・start
```style.css
.container{
    (省略)
    justify-content: start;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/ff587710-f676-18c7-3cc6-0084bdc51fb7.png)
## ・center
```style.css
.container{
    (省略)
    justify-content: center;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/66b34829-8525-3c4e-ad0c-dce31e3ef914.png)
## ・end
```style.css
.container{
    (省略)
    justify-content: end;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/86dd7d5b-b328-c661-90de-7caf3aee3c54.png)
## ・space-between
```style.css
.container{
    (省略)
    justify-content: space-between;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/f17c1d23-1092-7b43-f430-02bb86864312.png)
## ・space-around
```style.css
.container{
    (省略)
    justify-content: space-around;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/e64fbdf7-b8f7-bed4-72b7-042d1189d71e.png)
## ・space-evenry
```style.css
.container{
    (省略)
    justify-content: space-evenry;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/a1754a10-5b79-1083-8464-43a383ed88be.png)

## 〇align-items（上下の配置指定）
高さが必要なので、containerの高さを変更
```
.container{
    border: 5px pink solid;
    display: flex ;
    height:200px;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/e9cc8549-0f6b-0ac6-c52d-416690f28bd4.png)
## ・strech
```style.css
.container{
    (省略)
    align-items: strech;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/3e6a3780-574c-7d4c-1efd-b451c26901de.png)
## ・center
```style.css
.container{
    (省略)
    align-items: center;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/58196f2a-90a0-f55c-64be-8bbd5273ff59.png)
## ・start
```style.css
.container{
    (省略)
    align-items: start;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/7b32e5c3-2300-85d3-baf5-b38d0bb6597c.png)
## ・end
```style.css
.container{
    (省略)
    align-items: end;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846971/7b6458df-2ce9-eb50-e0fd-a8c0065cdb5c.png)

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