ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー 事業内容、ポートフォリオ、料金各種手続き、コンタクトファーストビュー 企業理念ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

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

flexboxで横並びを完全マスター解説

 

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


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

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

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

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

この記事の内容

  • flexboxのプロパティ一覧
  • flexboxで横並びや折返しの書き方
  • flexboxの活用例
もし読み進めてみても分からないことがあれば1500円でレクチャーしています
佐藤先生

 

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

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

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

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

フレックスボックスを使う時のパターン

  • ブロックを親内で垂直方向に中央揃えする
  • 全ての子を等しく整列する
  • 全ての列に異なるコンテンツが含まれても、同じ高さを維持する

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

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

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


プロパティ

概要
display:flex

フレックスコンテナ(親要素)の指定

flex-direction 子要素をどの方向に並べていくか指定するプロパティ
flex-wrap 子要素をグリッド表示させるか指定するプロパティ

justify-content

子要素同士の間隔を指定するプロパティ

align-items

子要素同士の上下の間隔を指定するプロパティ



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

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

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

主軸と交差軸がとる4種類の値

  • row(初期値)左から右に並ぶ
  • row-reverse 右から左に並ぶ
  • column 上から右に並ぶ
  • column-reverse 下から上に並ぶ

 

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

(画像例)https://mdn.mozillademos.org/files/15614/Basics1.png

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

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


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

flex-wrap のプロパティに使う値

  • nowrap
  • wrap
  • wrap-reverse

ちなみに、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の横バージョンと覚えておいて問題ありません。

justify-contentでつかう値

  • flex-start:行頭寄せ、通常は左揃え(初期値)
  • flex-end:行末寄せ、通常は右揃え
  • center:センター揃え
  • space-between:アイテムの間にスペースを均等に割り付け
  • space-around:アイテムの両端にスペースを均等に割り付け

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

(画像例)

https://gyazo.com/7ddf30b264d69de69b67f04ece2ff44f

 

フレックスボックスの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の使い方についてまとめているので、こちらもチェックしてみてください。
佐藤先生




© 2024 ホームページ制作なら制作実績200件以上の現役ウェブデザイナーへ直接依頼!東京都新宿区|渋谷区|目黒区|港区 Powered by AFFINGER5