flexboxで横並びや折返しを自由自在にカスタマイズできる使い方

このブログでは、flexboxで横並びや折返しを自由自在にカスタマイズできる使い方について解説していきます。

こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者 (https://coconala.com/users/2367002)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演

佐藤先生

ぺんぺん

flexboxで横並びや折返しってどうやってやるの？できれば難しい記述なく作れる方法を教えてください。

上記のような、flexboxで横並びや折返しに関するお悩みにお答えします。

もし読み進めてみても分からないことがあれば1500円でレクチャーしています

佐藤先生

フレックスボックス（flexbox）でデザインを横並びにする

フレックスボックスとは縦並び、または横並びでレイアウトするための1次元のレイアウト方法のことを指しています。フレックスボックスのプロパティを使用すれば、ワードプレスで横並びのレイアウトができるようになります。

このフレックスボックスが現れるまで、横並びする有名なプロパティとして「フロート」が使われていましたが、機能がかなり限定的され使いづらいことが懸念点され続けていました。現在では、「デザインを横並びにする＝フレックスボックス」が主流です。

フレックスボックスのプロパティを使う時は次のようなパターンになります。

フレックスボックスを初心者が使う上で覚えておいてほしい2つの基本的な知識として、フレックスボックスには、
フレックスコンテナ（親要素）、フレックスアイコン（子要素）という呼び名があります。
度々、耳にしていくと思うので覚えておきましょう。

フレックスボックスのプロパティ一覧

まずフレックスボックスには、フレックスコンテナに設定できるプロパティがいくつか存在します。以下の通りです。

フレックスアイテム（子要素）の方向を設定するflex-direction

flex-directionというプロパティは、フレックスアイテム（子要素）の方向を指定するプロパティです。フレックスボックスは主に主軸と交差軸の2つの観点から考えます。このflex-direction は、主軸の方向に沿って並びます。

主軸と交差軸がとる4種類の値は次の通りです。

横並びのレイアウトを作るには、「row」または「row-reverse」を選択します。ただ、display:flex; と指定すれば、初期値で横に並ぶ為、基本的に単純に横に並ばせるのであれば、このflex-direction のプロパティは必要ありません。「column」を指定すると、交差軸に沿って、縦に並びます。

（画像例）https://mdn.mozillademos.org/files/15614/Basics1.png

フレックスボックスの位置合わせを行いたい時は、軸の重要性を理解することが大切です。一つの軸に沿ってコンテンツを揃えるプロパティが用意されているので、初心者でも扱いやすいでしょう。

子要素を折り返してグリッド表示させるか設定するflex-wrap

flex-wrapとは、ボックスから子要素であるテキストがはみ出してしまう場合に、折り返して見映えよく表示させるプロパティです。
flex-wrapは、具体的には次のような値を使用します。

ちなみに、nowrapを指定するときには、flex-shrinkが効いていると子要素の収縮が起きるため設定の見直しが必要です。

（画像例）https://webukatu.com/wordpress/wp-content/uploads/2020/12/pankaj-patel-Ylk5n_nd9dA-unsplash-1-768x512.jpg

flex-wrapの使い方は？

商品一覧表を作るときなどの、決まっているサイズの要素を並べてテキストを折り返したい時にflex-wrapは便利です。先ほど紹介した属性値は次のような使い方ができます。

• wrap：はみ出る部分を折り返し、下に並べる
• wrap-reverse：はみ出る部分を上に折り返す
• nowrap：折り返さない

flex-wrapを使って要素の動作を指定するには次のように記述します。.parent{
display: flex;
flex-wrap: wrap; //このように親要素に指定します
width: 600px;
}

.child{
box-sizing:border-box;
border: 5px solid white;
flex-basis: 200px; //（200pxの要素が3つ並ぶと、flex-wrapが動作する）
padding: 10px;
background-color: #ff838b;
}

nowrapの指定

初期値なので、ボックス内のアイテムは折り返されず1行配置されます。もし、5つのアイテムを配置したとすると、1～5のアイテムが左から右へ順番に配置される仕組みです。さらにアイテム数が増えても、変わらず折り返しは行われません。

wrapの指定

flexを設定しているボックスは折り返され、下に向かってZ字のように配置されます。アイテムが増えるほど、親要素の最大幅の中で折り返されます。

wrap-revereseの指定

wrapとは逆方向、つまり下から上に向かって折り返される値です。アイテムが増えるたびに親要素に設定されている幅の範囲内で折り返されていきます。

flex-wrapの注意点

IE11を利用している方は、flex-wrapの動作に注意してください。テーブル要素の幅を指定して、flex-wrapを使っても折り返し表示されません。IE11で見ると折り返されないのに、他のブラウザなら折り返し表示される場合はテーブル要素を使わないほうがよいでしょう。

親要素でwidthやmax-widthを固定すれば、折り返されない不具合を回避できるかもしれません。

もし、flex-wrapを活用しているのにボックス内でテキストが折り返されない場合は次のような理由が考えられます。

• 親要素にflexを指定していない
• 親要素に幅が指定されていない
• IE10、IE11を利用している

flex-wrapは親要素をはみ出るテキストを折り返すために利用するため、親要素の幅が指定されていなかったりflexが指定されていなかったりするとプロパティの効果を発揮しません。もし、IE10やIE11で表示を確認していてflex-wrapが効いていないのであれば他のブラウザで一度確認してみましょう。

他のブラウザを使用できない環境なら、先ほど紹介したようにtdタグを削除するか親要素の最大幅の設定を見直してください。

子要素同士の間隔を指定するjustify-content

justify-contentとは、子要素同士の間隔を指定するプロパティです。つまり、フレックスコンテナ内の主軸方向（横方向）並びの位置を指定しするために使用するプロパティがjustify-contentです。初期値の主軸は横方向ですから、align-itemsの横バージョンと覚えておいて問題ありません。

では、上に挙げた値をつあって、コーディングする例を紹介しましょう。次のような横並びレイアウトを作成できます。

（画像例）

フレックスボックスのCSS使用例

フレックスボックスで使う位置を揃える値には何があるでしょうか？

（画像例）http://www.htmq.com/css/images/flex-pack.svg

子要素同士の上下の間隔を指定するalign-items

align-itemsとは、子要素同士の上下の間隔を指定するプロパティです。アイテムの交差軸方向の位置を揃えて指定できます。つまり、justify-contentの縦バージョンと覚えて問題ありません。フレックスボックスの縦並びを指定する時はalign-itemsです。

フレックスボックス（flexbox）でalign-itemsが効かないときの対処法

縦方向に等間隔でコンテンツを並べるためにalign-itemsを使おうとしても、うまくいかないことがあります。アラインアイテムズが効かない理由は何でしょうか。

アラインアイテムズを使ってレイアウトできるのは複数行にまたがって要素があるときのみです。アラインアイテムズは縦並びについての詳細を指定するため、複数行ないときには利用できません。

では、縦方向にするためにフレックスディレクションで「column」の値を使えばいいのでしょうか。子アイテムを縦方向にする出では不十分です。アラインアイテムズだけではなく、横並びのレイアウトを調整するジャスティファイコンテンツの使用も必要になります。

flexboxの高さを揃える方法

（画像例）https://ryu-webstudy.com/wp-content/uploads/2021/02/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2021-02-14-7.51.10-768x269.png

要素を横並べできたら、高さも揃えて見映えよく整えたいと思いますよね。しかし、「width」を指定すると、テキストのボリュームによって高さに差が出てしまいます。

テキスト上下を統一するために親要素に「align-items: center;」を指定すると、全体的な高さがバラバラになります。なぜなら、子要素タグがX軸に沿って配置されるからです。

では、どのようにflexboxの高さを揃えたらよいのでしょうか。

子要素にもflexを適用させる

テキストの高さを揃えたいときには、子要素にflexを使いましょう。上下真ん中に統一したいなら、高さを揃えたいテキストタグに「flex＆align-items: center」をつけます。下記のようにコーディングすれば、ボックスの高さを揃えられるでしょう。

ul {
display: flex;
justify-content: space-between;
align-items: center;
}
li {
padding: 5px 10px;
width: 30%;
display: flex;
align-items: center;
}

孫要素の高さを揃えたいときはどうする？

flexboxを使って子要素だけでなく孫要素の高さも揃えたい場合は、どうすればいいのでしょうか。子要素の子要素つまり孫要素の高さを揃えるには、子要素タグに「display:flex」を指定する必要があります。

そもそも、flexboxは一番高い位置にある要素に合わせてコンテンツが伸びるように設定されています。そのため孫要素にもflexを適用させれば、高さを揃えられるのです。

フレックスボックス（flexbox）まとめ

フレックスボックスを指定してCSSコーディングすれば、親要素にジャスティファイコンテンツやアラインアイテムズを組み合わせるだけで、自由自在にレイアウトできます。要素の横並びレイアウトができなくて困っているワードプレス初心者は是非試してみてください。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生