Help us understand the problem. What is going on with this article?

flexboxで段組をするときは、大量のテキストが入った場合を想定しよう

More than 1 year has passed since last update.

気付いている方は、けっこういるかも知れませんが…
Bootstrap4の可変グリッド(col-{breakpoint}-auto)には、本来の幅を超える改行が含まれないテキストが入ったときに崩れる不具合があります。
https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

本来想定されている見た目

Grid_system_·_Bootstrap 2.jpg

開発者ツールで大量のテキストを流し込んだ状態

Grid_system_·_Bootstrap.jpg

これを修正しようとすると、ほぼすべてのグリッドに手を入れなければならないらしいので、ここではこの問題に関する解決策は割愛しますが、このような挙動が起こる原因について書いておきます。

flex-shrinkの役割

結論から書くと、 flex-shrink:1 を指定していないためです。

こちらに、floatを使った場合と、Flexboxを使った場合のサンプルを作りました。
左に幅固定ボックス、右に幅可変ボックスとテキストがある、よくあるコンポーネントです。

https://codepen.io/webbingstudio/pen/jpWJLJ

3つめの「flexbox + flex-grow:1 & flex-shrink:0」のパターンは、大量のテキストが入った場合に伸び切ってしまいます。
flex-growや、flex-basisを指定したときに、テキストが少ない場合のみで動作確認をしていると、この事故が起きやすくなります。

ウェブクリエイターボックスさんのチートシートでは、flex-shrinkの役割について、以下のように解説されています。

flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

つまりflex-shrinkは、flex-growではフォローできない、ボックスの幅が伸び切った際に適切な幅に制限する役割を持っているのです。
どのような要素が入るか予測できない可変ボックスでは、flex-growとflex-shrinkの両方を指定するのが良いと考えられます。

逃げるは恥だが役にt(ry

以上、flex-grow:1と一緒にflex-shrink:1も指定しようねという話でしたが、このような「何が入るのか、左側がどのような幅になるのかわからない」状況の場合、旧来の float + overflow:hidden とか、 display:table の方が無難なこともあります。

CSS Gridがもっと楽に使えるようになればそれに越したことはないでしょうし、理想ではあるのですが…

webbingstudio@github
フリーランスのWebエンジニアです。HTML5/CSS3/jQuery/PHP/Movable Type/WordPress/a-blog cms/baserCMS
https://webbingstudio.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした