【CSS】フレックスボックスとグリッドで自由にレイアウトを整える

#はじめに
まずは以下のようなサンプルコードを書いてみます。

```html
        <div class="container">
            <div class="sample">sample1</div>
            <div class="sample">sample2</div>
            <div class="sample">sample3</div>
            <div class="sample">sample4</div>
            <div class="sample">sample5</div>
            <div class="sample">sample6</div>
        </div>
```

```css
.sample {
    background: skyblue;
    margin: 10px;
    padding: 10px;
}
```
結果。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/80e0c7e5-01a5-9245-3e1b-66a506bcb9e7.png">
ここから、要素の配置を色々と変えていきます。
このとき、CSSで`float: left;`みたいなことをするよりも、フレックスボックスやグリッドを使った方が、簡単に自由なレイアウトができるみたいです。
#フレックスボックス
CSSに以下のコードを追加します。

```css
.container {
    display: flex;
}
```
結果。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/3e8de846-cbeb-edd3-cf8e-4752276d15ce.png">
横並びになりました。
さらにいろいろいじっていきます。
###並び順を逆にする(横)

```css
.container {
    display: flex;
    flex-direction: row-reverse;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/e0635f37-f4a5-6c7b-612a-2b9a75797ab6.png">
###並び順を逆にする(縦)

```css
.container {
    display: flex;
    flex-direction: column-reverse;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/af19f336-03c3-1a8c-e8d4-244bd3b8b39a.png">
###折り返す

```css
.container {
    display: flex;
    flex-wrap: wrap;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/89cbe771-efaf-0b8c-4acb-07dfff0b7af8.png">
###中央揃え(水平)

```css
.container {
    display: flex;
    justify-content: center;
}
```
![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/7a9de2a8-6042-79e6-2b71-5938efb5d2ad.png)
###右揃え(水平)

```css
.container {
    display: flex;
    justify-content: flex-end;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/376df4b1-4dd9-3f4e-b8ff-9f395179775d.png">
###両端均等揃え

```css
.container {
    display: flex;
    justify-content: space-between;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/5940608f-6646-00c7-36aa-8fdd92bc9be9.png">
###均等揃え

```css
.container {
    display: flex;
    justify-content: space-around;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/8b2f5212-fdd4-9cb7-1a8b-c91ccf082973.png">
###高さを広げる

```css
.container {
    display: flex;
    align-items: stretch;
    height: 20vh;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/2308cec4-57f3-39d7-4266-71f04a5f776f.png">
###上に揃える

```css
.container {
    display: flex;
    align-items: flex-start;
    height: 20vh;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/03104258-4473-b59c-362e-1fe1ceed9c60.png">
###下に揃える

```css
.container {
    display: flex;
    align-items: flex-end;
    height: 20vh;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/5c2b0a65-c82d-5a22-8f67-321c9a1c03a7.png">
###中央揃え(垂直)

```css
.container {
    display: flex;
    align-items: center;
    height: 20vh;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/2c79707e-a00a-2ceb-8394-f57f04773c23.png">
#グリッド
CSSを以下のようにします。

```css
.container {
    display: grid;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/657d5b05-f19b-4bfb-89d5-f6390d2a3a7a.png">
特に変わりません。色々といじっていきます。
###子要素の横幅と余白

```css
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    gap: 20px;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/451a594d-128b-eb16-3990-24191d58035f.png" width=70%>
###子要素の横幅の比率

```css
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    gap: 10px;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/84f34ec4-5876-a2a8-efd7-b2200ebf8cec.png">

#おまけ
おすすめの本です。どちらかというとCSSに重点が置かれている感じがします。デザインについての説明が豊富なのが特徴です。
[1冊ですべて身につくHTML-CSSとWebデザイン入門講座](https://www.amazon.co.jp/1冊ですべて身につくHTML-CSSとWebデザイン入門講座-Mana/dp/4797398892)