前提・実現したいこと
3つ要素が横並びになっており、左の要素に含まれているテキストを折り返しています。
下記は動作サンプルです。
サンプル(CodeSandBox)
折り返しされたテキストの高さを、他の要素の高さと揃えたいです。
上図で言えば左の要素の2行目を、他の要素のfuga
の位置に配置したいです。
発生している問題・エラーメッセージ
左の要素と他の要素の高さが揃っていません。
該当のソースコード
html
1<div class="wrap"> 2 <div class="hoge"> 3 <span><i>1</i><i>2</i><i>3</i></span> 4 <span><i>4</i><i>5</i><i>6</i></span> 5 <span><i>7</i><i>8</i><i>9</i></span> 6 <span><i>1</i><i>2</i><i>3</i></span> 7 <span><i>4</i><i>5</i><i>6</i></span> 8 <span><i>7</i><i>8</i><i>9</i></span> 9 </div> 10 <div class="fuga"> 11 <span>真ん中</span> 12 <span><i>1</i><i>2</i><i>3</i></span> 13 <span>fuga</span> 14 </div> 15 <div class="fuga"> 16 <span>右</span> 17 <span><i>1</i><i>2</i><i>3</i></span> 18 <span>fuga</span> 19 </div> 20 </div>
css
1.wrap { 2 border: 1px solid black; 3 display: flex; 4 width: 250px; 5 padding: 16px; 6} 7 8.fuga { 9 width: 100px; 10} 11 12.fuga > * { 13 display: block; 14 text-align: center; 15}
試したこと
左の要素もflex
を設定すれば高さいっぱいまで広がってくれると思い、下記のように書いてみました。
css
1.hoge { 2 display: flex; 3 flex-wrap: wrap; 4}
上記で惜しい感じにはなったのですが、高さを揃えることができませんでした。
justify-content: space-between
の縦版プロパティがあれば高さが揃えられそうです。
また、flex
を設定したことで、3桁の数字の間が詰まってしまいました。
3桁の数字の間は確保したいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。