いつもありがとうございます。
スタイルシートの質問です。
列数・行数・列幅が不定のFlexboxの各行の上にボーダーを付けたいのですがやり方がわかりません。
HTML
1<style> 2 .parent{ 3 display: flex; 4 flex-wrap: wrap; 5 } 6 .child{ 7 border-top:3px solid black; 8 white-space: nowrap; 9 padding-right:1em; 10 margin-bottom:1em; 11 } 12</style> 13 14<div class="parent"> 15 <div class="child">ああああああああ</div> 16 <div class="child">ああああああああああああああああ</div> 17 <div class="child">ああああああ</div> 18 <div class="child">あああああああ</div> 19 <div class="child">ああああああ</div> 20</div>
左寄せのまま赤の部分にも画面いっぱいにボーダーをつなげたいです。
方法をご教示いただければと思います。
■.child に flex:1; を付けた場合 →左寄せにならない
■さらに .parent::after を加えて flex:大きい数 を付けた場合 →できました!!!
と思ったけど微妙にダメでした。2行追加してよく見たら一番下の行以外が左寄せなっていませんでした。
■magendaさんのご回答 →できました!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/12 02:20
退会済みユーザー
2019/03/12 02:25
2019/03/12 02:55
退会済みユーザー
2019/03/12 02:56
2019/03/12 03:08
退会済みユーザー
2019/03/12 03:18
2019/03/12 03:23
退会済みユーザー
2019/03/12 03:25
2019/03/12 03:31