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

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

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

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

##目次

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

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

　↓ display: flex;

html

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

.css

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

.flexbox{
  display:flex;
}

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

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

　↓ display: flex;

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

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

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

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

＞moz align-items
＞moz 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;

####1-2. center
align-items: center;

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

####1-4. flex-end
align-items: flex-end;

####1-5. start
flex-startと同じ。。
align-items: center;

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

align-items: end;

####1-7. baseline
align-items: baseline;

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

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

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

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

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

　↓ display: flex;

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

▼コード

html

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

.css

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

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

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

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

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

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

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

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

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

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

＞moz justify-content

####1. flex-start `justify-content: flex-start;` 

####2. center
justify-content: center;

####3. flex-end
justify-content: flex-end;

####4. space-evenly
justify-content: space-evenly;

####5. space-between
justify-content: space-between;

####6. space-around
justify-content: space-around;

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

.css

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

**▼point２** `space-*`を使った状態でmarginを適用することもできるがわかりにくいため、任意でスペースを開けたい場合は、**`space-*`を使わず、個別にmarginを設定していく方が調整しやすい**。
##折り返す方法 `flex-wrap: wrap;` 親要素に`flex-wrap: wrap;`を指定すると、親要素の横幅に合わせて折り返すことができる。デフォルトは`no-wrap`になっている。

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

＞moz flex-wrap

###実例

　↓ flex-wrap: wrap;

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

要素４が上に移動している。

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

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

　↓ imgタグに-2を設定

.css

.flexbox img{
  order: -2;
}

**▼注意点** どれか一つの要素が動いた場合、動いた後の現在位置が`order: 0`になる。
##縦並びに戻す `flex-direction: column;` `display: flex;`を適用すればデフォルトで横並びになるが、メディアクエリなどで再度縦並びに戻したい場合は、以下を追記する。

flex-direction: column;

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

###実例

　↓ flex-direction: column;

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

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

html

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

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

###・`aligh-items: center`

###・`aligh-items: flex-start` 
###・`aligh-items: flex-end` 
##補足 `display:flex`を適用したことで上下の要素に余計なマージンが生じることはない。

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

##参考リンク一覧

• moz flexbox
• moz align-items
• moz align-self
• moz flex-wrap
• moz flex-direction
• moz justify-content