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

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

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

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

目次

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

横並び display: flex;

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

　↓ display: flex;

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

.flexboxdiv{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の３つだけ覚えておけば大丈夫そう。

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;

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

▼コード

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

.flexboxdiv{background:skyblue;margin:010px;}.flexboxp{background:yellow;margin:010px;}.flexbox{border:solidlightgray1px;width:70%;display:flex;}

親要素に収まるように横幅が自動調整される

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

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

min-width以下にはならない

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

要素は左寄せになる

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

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

水平方向の位置とスペース調整 justify-content

justify-contentプロパティを使うと、要素を水平方向で調整できる。

＞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と合わせて使うのが一般的。

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

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

折り返す方法 flex-wrap: wrap;

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

＞moz flex-wrap

実例

　↓ flex-wrap: wrap;

wrap-reverseの場合

flex-wrap: wrap-reverse;

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

個別に並べ替えする order: 数値

orderプロパティを使うと指定した順番で並べ替えることができる。

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

　↓ imgタグに-2を設定

.flexboximg{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を使う。

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

.flexboxdiv{background:skyblue;margin:010px;min-width:200px;height:100px;}.flexboxp{background:yellow;margin:010px;min-width:150px;height:100px;}.flexbox{border:solidlightgray4px;width:70%;display:flex;flex-direction:column;align-items:center;}

・aligh-items: center

・aligh-items: flex-start

・aligh-items: flex-end

参考リンク一覧

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