【CSS】要素を横並び・縦並びにする。display:flexの使い方を実例で解説

要素を横並びにする方法はいくつか存在する。
一番おすすめは**`display: flex;`**（flexbox）。

昔は`float`（とclearfixの組み合わせ）が使われていたが、flexboxが出てからは、そちらの方が主流。

>横並びでもカルーセルを作成する場合は、`display: table;`も使われたりするらしい。


##目次

1. [横並び `display: flex;`](#横並び-display-flex)
2. [`display: flex;`の注意点](#display-flexの注意点)
    3. [高さは一番大きな要素に合う（画像も！）](#高さは一番大きな要素に合う画像も)
    4. [高さを元に戻す方法](#高さを元に戻す方法)
        5. [`align-items`の設定（親）](#1-align-itemsの設定親)
        6. [`align-self`の設定（子）](#2-align-selfの設定子)
    7.  [各要素の横幅は各要素の中身の大きさになる（指定がない場合）](#各要素の横幅は各要素の中身の大きさになる指定がない場合)
    8.  [親要素に収まるように横幅が自動調整される](#親要素に収まるように横幅が自動調整される)
    9.  [要素は左寄せになる](#要素は左寄せになる)
10.  [水平方向の位置とスペース調整 `justify-content`](#水平方向の位置とスペース調整-justify-content)
11.  [折り返す `flex-wrap: wrap;`](#折り返す方法-flex-wrap-wrap)
12.  [個別に並べ替えする `order: 数値`](#個別に並べ替えする-order-数値)
13.  [縦並びに戻す `flex-direction: column;`](#縦並びに戻す-flex-direction-column)
14.  [参考リンク一覧](#参考リンク一覧)




<br>
##横並び `display: flex;`
通常要素は縦に積まれていく。この親要素に対して`display: flex;`を指定すると横並びになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8b7679bb-8b0b-6c1c-73df-ded959cde258.png)


　↓ `display: flex;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/1f933b98-c4b9-4c60-7de8-f66c411cf538.png)


```html:html
<div class="flexbox">
  <div>要素1</div> 
  <div>要素2</div>
  <div>要素3</div>
  <div>要素4</div>
  <div>要素5</div>
</div>
```

```css:.css
.flexbox div{
  background: skyblue;
  margin: 10px;
  width: 200px;
  height: 100px;
}

.flexbox{
  display:flex;
}
```

<br>
##`display: flex;`の注意点
###高さは一番大きな要素に合う（画像も！）
flexの中の要素の高さに指定がない場合、一番高い要素の高さ自動で変更される。

###実例
要素２が最も高さがある。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/617afdd4-301c-71cd-9a1c-fec618788750.png)|
|:--|

　↓ `display: flex;`

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/568e03b9-0117-8c15-fa15-43a8671723e2.png)|
|:--|

高さが最も高い要素２に併せて伸びた。divタグだけでなく画像も縦にいっぱいに伸びてしまう。

これはflexboxの中の要素のcssを指定する`align-items`というプロパティがデフォルトで`stretch`（引き伸ばす）になっているため。（normalでも同様になる）


<br>
##高さを元に戻す方法
高さを元の要素の高さに戻す方法は２つある。

1. `align-items`の設定（親）
2. `align-self`の設定（子）

＞[moz align-items](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)
＞[moz align-self](https://developer.mozilla.org/ja/docs/Web/CSS/align-self)

###1. `align-items`の設定（親）
flexを設定した親要素がデフォルトで``align-items: stretch;`となっているのでこれを変更すればいい。

`center`, `flex-start`, `flex-end`の３つだけ覚えておけば大丈夫そう。

| 値 | 内容 |
|:-:|:--|
| stretch  | デフォルト。一番高い要素に合わせて伸びる  |
| normal  | stretchと同じ。  |
| center  | 中央寄せ。  |
| flex-start  | 上に寄せる  |
| flex-end  | 下に寄せる  |
| start  | flex-startと同じ。  |
| end  | 効かない。（flex-startと同じ）  |
| baseline  | ベースラインが一直線になるように配置  |



####1-1. center
`align-items: normal;`
`align-items: stretch;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2df50fc5-235d-dbe1-d00b-4e1cb6ed3478.png)


####1-2. center
`align-items: center;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/3164b845-e01d-3c39-8b69-f1186d532536.png)


####1-3. flex-start
`align-items: flex-start;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f6be773a-587e-41a5-2daa-013375cdde1e.png)


####1-4. flex-end 
`align-items: flex-end;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/711f96bd-4b87-c2f4-53c3-d38aaeeb462d.png)

####1-5. start
flex-startと同じ。。
`align-items: center;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/1770da3c-d57d-d2b5-0daa-ab6de77a2dc2.png)


####1-6. end
Chromeでは効かない、、startと同じになった。

`align-items: end;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f6be773a-587e-41a5-2daa-013375cdde1e.png)


####1-7. baseline
`align-items: baseline;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/631443fb-a9d0-48d9-51ec-0de5578413da.png)


<br>
####2. `align-self`の設定（子）
flexboxの中身を一律で設定するのではなく、要素一つ一つを指定する方法。

使える値は、`align-items`とほぼ同じ。`center`, `flex-start`, `flex-end`を覚えておけばOK。

####imgタグにのみ`align-self: center;`を適用した場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b202d17f-bf7c-02a9-794b-20f20d94008e.png)


<br>
####それぞれ異なる値にした場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8b2a8f9c-6ce4-347b-a2c7-a698c54db2aa.png)



<br>
##各要素の横幅は各要素の中身の大きさになる（指定がない場合）
横幅の指定がない要素は、その要素の中ある要素の大きさになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/0789d581-7440-3bc3-ce4c-73f9884248eb.png)

　↓ `display: flex;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/287cf22a-1ca1-7ced-d6b3-0964f7209081.png)


横幅を指定すれば、指定した長さになる。


**▼コード**

```html:html
<div class="flexbox">
  <div>要素1</div> 
  <p>要素2　ここはpタグ。</p>
  <img src="img/small-cat.jpg" alt="">
  <div>要素4</div>
</div>
```

```css:.css
.flexbox div{
  background: skyblue;
  margin: 0 10px;
}

.flexbox p{
  background: yellow;
  margin: 0 10px;
}

.flexbox{
  border:solid lightgray 1px;
  width: 70%;
  display:flex;
}
```



<br>
##親要素に収まるように横幅が自動調整される
中の要素にwidthを指定している場合でも、親要素の幅が縮まると合わせて小さくなる。折り返しはされない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/93bb36c0-0c91-6c7a-a051-d9cc401cc658.png)


　↓ 親要素の幅を縮める（グレーの枠線）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a5e55b91-b53f-a482-0718-237f9bd61994.png)


<br>
####min-width以下にはならない
`min-width`を設定している場合は、その値が守られる。
親要素の幅を超える場合は**はみ出る**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7f1b49a5-f55d-325c-ee3f-f4d388a31390.png)



##要素は左寄せになる
`display: flex;`を適用した場合、中の要素は水平方向で左寄せになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/55b74af1-8809-b3ce-c47b-d755abbbe21c.png)


グレーの親の枠線に対して左に寄っているのがわかる。


<br>
###水平方向の位置とスペース調整 `justify-content`
justify-contentプロパティを使うと、要素を水平方向で調整できる。

| 値 | 内容 |
|:-:|:--|
| flex-start  | デフォルト。左寄せ |
| start  | デフォルトと同じ。  |
| center  | 中央寄せ  |
| flex-end  | 中央寄せ  |
| end  | 機能しない。(デフォルトと同じ)  |
| space-evenly  |　均等に配置  |
| space-between  | 均等に配置。ただし、最初のアイテムは先頭寄せ。最後のアイテムは末尾寄せ。  |
| space-around  |  均等に配置。ただし、各アイテムの両側に半分の大きさの間隔を置く |


＞[moz justify-content](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)

<br>
####1. flex-start 
`justify-content: flex-start;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/55b74af1-8809-b3ce-c47b-d755abbbe21c.png)


####2. center
`justify-content: center;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2402f431-900b-f4aa-b644-21e280339036.png)


####3. flex-end
`justify-content: flex-end;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/bd85ff3f-d606-59e7-e347-9f56cd2a1871.png)


####4. space-evenly
`justify-content: space-evenly;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d04fb570-7dd7-36c5-d606-fb8df3ffd259.png)


####5. space-between
`justify-content: space-between;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/53fce153-1e63-0e54-9e32-b39d8ea76e6a.png)


####6. space-around
`justify-content: space-around;`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f9acb863-3916-a8db-0339-954c5e4826a6.png)


<br>
**▼point１**
デフォルトでは中の要素が縦方向にstretchしてしまうため、`align-items`や`align-self`と合わせて使うのが一般的。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/931f633f-4237-9603-3714-87207ee4f6a4.png)

```css:.css
.flexbox{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
```


<br>
**▼point２**
`space-*`を使った状態でmarginを適用することもできるがわかりにくいため、任意でスペースを開けたい場合は、**`space-*`を使わず、個別にmarginを設定していく方が調整しやすい**。





<br>
##折り返す方法 `flex-wrap: wrap;`
親要素に`flex-wrap: wrap;`を指定すると、親要素の横幅に合わせて折り返すことができる。デフォルトは`no-wrap`になっている。

| 1 | 2 |
|:-:|:-:|
| wrap  | 折り返し  |
| wrap-reverse  | 逆順で折り返し  |
| no-wrap  |折り返しなし  |

＞[moz flex-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap)


###実例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7f1b49a5-f55d-325c-ee3f-f4d388a31390.png)

　↓ `flex-wrap: wrap;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f8bdddde-93e1-9c04-620f-a76bfe3a42b1.png)


###wrap-reverseの場合
`flex-wrap: wrap-reverse;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b827d758-316c-b374-cd58-b0badb395017.png)
要素４が上に移動している。


<br>
##個別に並べ替えする `order: 数値`
orderプロパティを使うと指定した順番で並べ替えることができる。

自分の**現在位置を`order: 0`**として、移動した個数を-2や2のように指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/bf416ed2-9564-825d-2f6b-1d1acd5ecd26.png)

　↓ imgタグに-2を設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/9eee7bfb-f17f-a27b-3f30-7e1b1b778fcb.png)

```css:.css
.flexbox img{
  order: -2;
}
```

<br>
**▼注意点**
どれか一つの要素が動いた場合、動いた後の現在位置が`order: 0`になる。


<br>
##縦並びに戻す `flex-direction: column;`
`display: flex;`を適用すればデフォルトで横並びになるが、メディアクエリなどで再度縦並びに戻したい場合は、以下を追記する。

`flex-direction: column;`

ちなみにデフォルトの横並びは`flex-direction: row;`が省略されている。

###実例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/93bb36c0-0c91-6c7a-a051-d9cc401cc658.png)

　↓ `flex-direction: column;`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d725d8b5-9c6c-0418-b59c-ac6de2b7ffea.png)

`display: flex;`のみの時と同じく親の横幅に合わせてstretchする。

元のサイズに戻したい場合は、親に`aligh-items`か子に`align-self`を使う。

```html:html
<div class="flexbox">
  <div>要素1</div> 
  <p>要素2　ここはpタグ。</p>
  <img src="img/small-cat.jpg" alt="">
  <div>要素4</div>
</div>
```

```css:.css
.flexbox div{
  background: skyblue;
  margin: 0 10px;
  min-width: 200px;
  height: 100px;
}

.flexbox p{
  background: yellow;
  margin: 0 10px;
  min-width: 150px;
  height: 100px;
}

.flexbox{
  border:solid lightgray 4px;
  width: 70%;
  display:flex;
  flex-direction: column;
  align-items: center;
}
```



<br>
###・`aligh-items: center`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/19bef7ac-17eb-0fe5-790f-91fcb00f7eb8.png)


<br>
###・`aligh-items: flex-start`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f87c6a65-8946-8fcc-fe36-60996f95ac5a.png)


<br>
###・`aligh-items: flex-end`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/045869bd-3e29-3079-02cb-ae347ce5c1d6.png)


<br>
##補足
`display:flex`を適用したことで上下の要素に余計なマージンが生じることはない。

他のCSSプロパティが効いている可能性が高い。


<br>
##参考リンク一覧

- [moz flexbox](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox)
- [moz align-items](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)
- [moz align-self](https://developer.mozilla.org/ja/docs/Web/CSS/align-self)
- [moz flex-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap)
- [moz flex-direction](https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction)
- [moz justify-content](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)