Flexbox・弱点と思い込んでいた天地中央背景伸ばしを解決！ 改行問題は未だ弱点。
2017/09/01 天地中央背景縦100％の解決策をコメント頂きました。
横並びブロックを改行・段落ちブロックは左配置
Q. Flexboxで普通に段落ちさせて左配置にするには？
A. デフォルト値で調整するしかない。
きっと何か方法があるはずだとアレコレ試したが、無理であると思い至る。
レスポンシブコーディングでは、ブレークポイントで justify-content の指定を分けて調整するのがベター。
デモの共通コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <ul> <li> <img src="images/ph_001.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_002.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_003.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_004.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_005.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_006.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> <li> <img src="images/ph_007.jpg" alt=""> <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 | ul { display: flex; flex-wrap: wrap; } li { width: 200px; margin-bottom: 20px; padding: 5px; border: 1px solid #ccc; } |
親ブロックいっぱいに敷き詰めてくれるが、改行すると左寄せにならない
1 2 3 | ul { justify-content: space-between; } |
左右の余白を均等にしてくれるが、改行すると左寄せにならない
1 2 3 | ul { justify-content: space-around; } |
float / inline-block と同様の結果
1 2 3 4 5 6 7 8 | ul { justify-content: flex-start; margin-right: -20px; li { margin-right: 20px; } } |
横並びブロックの中身を天地中央に配置・背景も縦100%
と今まで思い込んできたけれど、コメントで頂いたコードを試したらあっさりボックス内天地中央背景伸ばしを実現できた！
デモの場合は li にも display: flex; を指定して中身を調整すれば良かったですね。
コメントをくださった2001Yさん、本当にありがとうございまーす！
1 2 3 4 5 6 7 8 9 10 | <ul> <li>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</li> <li><img src="../images/ph_001.jpg">タグなしテキスト</li> <li>Lorem ipsum dolor sit amet</li> <li>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</li> <li>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</li> <li><img src="../images/ph_001.jpg"></li> <li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem Lorem</li> <li>ダミーテキスト</li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ul { display: flex; flex-wrap: wrap; justify-content: space-between; } li { width: 30%; color: white; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 20px; background: #666; } |
2001Yさんのコメントを2点補足しますね。
- align-items: stretch; はデフォルトスタイルのため、親要素である ul に 指定は不要
- li に指定している flex-direction: column; はHTMLコードに応じて削除可能
3コメント
初めまして。
flexについて調べてる最中に興味を持ったので、読ませていだきました。
ul タグに align-items: stretch; を指定し、li タグに以下のようなコードをつけるのではダメなのでしょうか。
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
2001Yさんはじめまして。
コメント頂きありがとうございます。
今ローカルで書いてくださったコードを試したら天地中央配置で背景も伸ばせましたー！ すげー！
思い込みって恐ろしい…。
後ほど記事を修正しますね。
記事を修正し補足もいたしました。
コメントくださって本当にありがとうございました m(_ _)m