Flexbox・弱点と思い込んでいた天地中央背景伸ばしを解決! 改行問題は未だ弱点。

tfWg91Ve9FaMQ0st

2017/09/01 天地中央背景縦100%の解決策をコメント頂きました!

目次

 

横並びブロックを改行・段落ちブロックは左配置

7qK3x5zzsQ45map4

Q. Flexboxで普通に段落ちさせて左配置にするには?

A. デフォルト値で調整するしかない。

きっと何か方法があるはずだとアレコレ試したが、無理であると思い至る。
レスポンシブコーディングでは、ブレークポイントで  justify-content の指定を分けて調整するのがベター。

デモの共通コード

 

親ブロックいっぱいに敷き詰めてくれるが、改行すると左寄せにならない

 

左右の余白を均等にしてくれるが、改行すると左寄せにならない

 

float / inline-block と同様の結果

 

横並びブロックの中身を天地中央に配置・背景も縦100%

A2hXC3Bf685A2Go6

6jQ88Lcq8G0Ycexp

と今まで思い込んできたけれど、コメントで頂いたコードを試したらあっさりボックス内天地中央背景伸ばしを実現できた!

デモの場合は li にも display: flex; を指定して中身を調整すれば良かったですね。
コメントをくださった2001Yさん、本当にありがとうございまーす!

2001Yさんのコメントを2点補足いたしますね。

  1. align-items: stretch; はデフォルトスタイルのため、親要素である ul に 指定は不要
  2. li に指定している flex-direction: column; はHTMLコードに応じて削除可能

 

3 コメント
2001Y

初めまして。
flexについて調べてる最中に興味を持ったので、読ませていだきました。

ul タグに align-items: stretch; を指定し、li タグに以下のようなコードをつけるのではダメなのでしょうか。

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

返信
KEITA HIRAI

2001Yさんはじめまして。
コメント頂きありがとうございます。

今ローカルで書いてくださったコードを試したら天地中央配置で背景も伸ばせましたー! すげー!
思い込みって恐ろしい…。
後ほど記事を修正しますね。

返信
KEITA HIRAI

記事を修正し補足もいたしました。
コメントくださって本当にありがとうございました m(_ _)m

返信

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。