【HTML・CSS】ブロック要素を横並びにする方法（その２−１）

遅くなりました。。
前回記事 の続きです。

Flexboxを利用して要素を横並びにする方法について調べて見ました。
なお、長くなってしまったので、２回に分けてお送りします。

利用方法

もっとも簡単なのが、親要素のCSSに対してdisplay: flex;と書くだけで、配下の子要素が横並びになります。
前回の要素を再利用してみます。

前回の要素

html
    <div class="wrapper"><p>wrapper</p>
      <div class="block1">ブロック１</div>
      <div class="block2">ブロック２</div>
      <div class="block3">ブロック３</div>
      <div class="block4">ブロック４</div>
    </div>

css
.wrapper {
  background-color: gray;
}

.block1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.block2 {
  width: 150px;
  height: 150px;
  background-color: red;
}

.block3 {
  width: 200px;
  height: 200px;
  background-color: green;
}

.block4 {
  width: 300px;
  height: 150px;
  background-color: yellow;
}

親要素に対して

.wrapper {
  background-color: gray;
  display: flex;
}

display: flex;をつけるだけで

上図のように子要素が横並びになります。

---

適応させた要素のことを「フレックスコンテナ」、配下の要素を「フレックスアイテム」と呼びます。

---

補足

今回、wrapperの文字の横にブロックが並んでいます。
これは<p>wrapper</p>も子要素に含まれているからです。 もしブロックをwrapperの下に横並びにしたい場合、以下のように</p>を末尾に持っていきp要素をブロックの親要素して、<p>要素に対してdisplay: flex;を当てればOKです。

    <div class="wrapper"><p>wrapper
      <div class="block1">ブロック１</div>
      <div class="block2">ブロック２</div>
      <div class="block3">ブロック３</div>
      <div class="block4">ブロック４</div>
    </p> 
    </div>

.wrapper {
  background-color: gray;
}

.p  {
  display: flex;
}

他にもやり方はあるかと思いますが、調査不足ですみません。。。

---

横並びにする方法としては以上となります。 が、調べて見ると横並び以外にもできることがたくさんありました。
まずは親要素となる「フレックスコンテナ」について見ていきたいと思います。

1-1. flex-direction (要素の縦横並びを指定できる)

子要素について横並びか縦並びを指定することができます。 以下のように親要素に対して記載します。　

.wrapper {
  background-color: gray;
  display: flex;
  flex-direction: ○○;
}

〇〇にはrow, column, row-reverse, column-reverseの４つが指定できます。

⑴ flex-direction: row;

ブロックが左から順で横並びになります。
rowは初期値となりますので、flex-directionを指定(記載)しない場合はrowが適応されます。

⑵ flex-direction: column;

ブロックが上から順に縦並びになります。

⑶ flex-direction: row-reverse;

ブロックが右から順で横並びになります。

⑷ flex-direction: column-reverse;

ブロックが下から順に縦並びになります。

1-2. flex-wrap(要素の折り返しの有無と方向を指定できる)

今までの例では、親要素の縦横幅を指定していませんでしたので、横幅はブラウザ画面一杯に広がり、縦幅は子要素の合計となっていました。
そのため、子要素の縦横幅はCSSで指定した幅のまま表示されていました。 しかし親要素の横幅や縦幅を子要素の合計よりも小さくした場合、何もしないと子要素の幅は自動で縮小されてしまいます。
親要素の横幅を小さく(500px)した場合
親要素の縦幅を小さく(400px)した場合 flex-wrapをCSSで指定することで、子要素の合計の幅が親要素の幅を超える場合、自動で折り返して表示させることができます。 以下のように親要素に対して記載します。　

.wrapper {
  background-color: gray;
  display: flex;
  flex-direction: row;
  flex-wrap: ○○;
}

〇〇にはnowrap, wrap, wrap-reverseの３つが指定できます。

⑴ flex-wrap: nowrap;

子要素を折り返さないようにします。 nowrapは初期値となりますので、flex-wrapを指定(記載)しない場合はnowrapが適応されます。

⑵ flex-wrap: wrap;

子要素を折り返すようにします。flex-directionの設定によって表示が変わります。
flex-direction: row; の場合 flex-direction: column;の場合 flex-direction: row-reverse;の場合 flex-direction: column-reverse;の場合

⑶ flex-wrap: wrap-reverse;

子要素をwrapとは逆に折り返すようにします。こちらもflex-directionの設定によって表示が変わります。
flex-direction: row; の場合 flex-direction: column;の場合 flex-direction: row-reverse;の場合 flex-direction: column-reverse;の場合

1-3. flex-flow(flex-directionとflex-wrapを同時に指定できる)

要素の並び順と折り返しをまとめて設定したい場合に利用します。 以下の様に親要素に対して記載します。

.wrapper {
  background-color: gray;
  display: flex;
  flex-flow: ○○ ●●;
}

○○にはflex-directionの値を入力し、半角スペースを空けてから ●●にはflex-wrapの値を入力します。
初期値はflex-flow: row nowrap;となります。

1-4. justify-content(要素の横並び位置を指定できる)

子要素を左右、中央、両端揃えなどに並べることができます。 以下の様に親要素に対して記載します。

.wrapper {
  background-color: gray;
  display: flex;
  justify-content: ○○;
}

〇〇にはflex-start, flex-end, center,space-between,space-aroundの５つが指定できます。 (flex-startは初期値となります。) 以降、flex-directionの値はrowにしています。

⑴ justify-content: flex-start;

子要素を左揃えに並べることができます。

⑵ justify-content: flex-end;

子要素を右揃えに並べることができます。 flex-direction: row-reverse;に似ていますが、こちらは要素の並び順に変更はありません。位置だけが変わります。

⑶ justify-content: center;

子要素を中央揃えに並べることができます。

⑷ justify-content: space-between

子要素の最初と最後を両端に寄せて残りを均等に配置します。

⑸ justify-content: space-around

子要素の全てを均等に配置します。

1-5. align-items(要素の縦並び位置を指定できる)

子要素を上下、中央揃えなどに並べることができます。 以下の様に親要素に対して記載します。

.wrapper {
  background-color: gray;
  display: flex;
  align-items: ○○;
}

〇〇にはstretch,flex-start, flex-end, center,baselineの５つが指定できます。 (stretchは初期値となります。)
以降、flex-directionの値はrowにしています。

⑴ align-items: stretch;

高さが指定されていない子要素について、親要素の高さまで広げることができます。 (下図はblock3,block4の高さを指定せず、親要素の高さを400pxにした場合の図になります)

⑵ align-items: flex-start;

子要素を上揃えに並べることができます。

⑶ align-items: flex-end;

子要素を下揃えに並べることができます。

⑷ align-items: center;

子要素を(親要素の縦幅に対して)中央揃えに並べることができます。

⑸ align-items: baseline;

子要素の各テキストのbaseline(テキストの下部分)を基準に並べることができます。
(下図はわかりやすい様にブロック4のフォントサイズのみ大きくしています)

1-6. align-content(折り返した要素全体の縦並び位置を指定できる)

折り返しを指定した場合のみ、子要素全体の位置を指定することができます。 以下の様に、親要素に対して記載します。
尚、利用する場合はflex-wrapかflex-flowでwrapかwrap-reverseを指定する必要があります。

.wrapper {
  background-color: gray;
  display: flex;
  flex-flow: row wrap;
  align-content: ○○;
}

○○にはstretch,flex-start, flex-end, center,space-between,space-aroundの６つが指定できます。(stretchは初期値となります。)
以降、flex-directionの値はrow、flex-wrapの値はwrap、要素の折り返しのため親要素の幅を500pxにしています。

⑴ align-content: stretch;

高さが指定されていない子要素について、折り返した子要素の高さを均等に広げることができます。 (下図はblock3,block4の高さを指定せず、親要素の高さを400pxにした場合の図になります) 一行目と二行目に行間がある様に見えますが、p要素であるwrapperの高さ(とmargin)を認識しているためです。 そのためp要素を除外し、block1,block2の高さを指定しない場合、上下の高さは親の高さに応じて均等になります。

⑵ align-content: flex-start;

子要素を上揃えに並べることができます。

⑶ align-content: flex-end;

子要素を下揃えに並べることができます。

⑷ align-content: center;

子要素の(親要素の縦幅に対して)中央揃えに並べることができます。

⑸ align-content: space-between;

子要素の最初と最後の行を両端に寄せて残りを均等に配置します。

⑹ align-content: space-around;

子要素の各行間を均等に配置します。

---

わかりづらい箇所もあったかと思いますが、以上となります。
今回ご紹介したものは全て親要素に対して設定するものになります。
次回は子要素に対して設定する内容を書きたいと思います。

---

参考にさせていただいたサイト、書籍について

【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。
- PLUS DESIGN COMPANY ブログ -

これからのCSSレイアウトはFlexboxで決まり！
- Web クリエイターボックス -

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)