フレックスボックスは、中に数が定まっていない複数のアイテムが詰め込まれるような状況が得意ということですかね。（うまくレイアウトを調整して埋めてくれるような感じ）
このブログ内での実際の使用例 逆に言うと、カラム固定レイアウトにはちょっと向いていないのか？ ちょっと試してみたら、ちゃんと理解できてないこともあって、なかなかムズい・・・ いくつか問題が出てきて、最初にハマった問題が ⇒長い文章だとBOXからはみ出す問題
以下のような３カラムのレイアウトを作った場合
１
２
３
これに、長い文字列を流し込むと、「Edge」「Firefox」では親コンテナを超えて文字列がはみだしてしまう。 (※「IE11」「Google Chrome」では折り返される模様 ─ 最新ブラウザで表示の違いが出てしまうのは、より新しい規格であるため、やむをえないか・・・)
１１１１１
２２２２２２２２２２２２２２
３３３
親要素に「flex-wrap:wrap;」を指定すると文字列ははみ出さなくなるけれど、アイテムが改行されてしまう・・・
１１１１１
２２２２２２２２２２２２２２
３３３
レイアウト無視で中にアイテムを複数詰め込む時はこれでよいけれど、カラム固定のデザインではこれは困るので使えない・・・
これを解決するには、どうやら「min-width:0;」を指定すると良いらしい。
１１１１１
２２２２２２２２２２２２２２
３３３
※「word-break:break-all;」でも折り返されるようになる。（「overflow-wrap:break-word;」は効かない。） これは要するに、文字列(単語)を折り返す場合、どこで折り返すかは、領域の幅があらかじめ分かっている必要がある。しかし、領域の幅が単語の長さによって決められる状況では、どこで折り返すのか判定できなくなってしまう、というのが原因だろう。 「word-break:break-all;」で折り返されるのは、どこで折り返すかを判定せず、問答無用で単語の途中から折り返してしまう仕様だから？ そして、flexboxにおいては、min-width の初期値が「0」ではなく「auto」(可変値)になっているのだそうで。これを固定値(0)にすることで、折り返しの計算ができるようになる、ということらしい・・・ （min-width の値は「0」でなくても固定値なら何でもよい模様。また、もしかしてと思って試してみたところ、「max-width」を指定しても折り返される結果になった。基準となる幅が明示されていれば動作するということか？）
コメント