Q&A
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
実現したいこと
flex-wrapで折り返したい
発生している問題・分からないこと
親要素（ul）にflexwrapをかけているが折り返されない
エラーメッセージ
error
1エラーメッセージはありません。
該当のソースコード
HTML
1<section id="about"> 2 <div class="about-img fixed-bg"> 3 <h2 class="sec-title">ABOUT</h2> 4 </div> 5 6 <div class="about-content wrapper"> 7 <div class="about-item"> 8 <h3 class="item-title">COFFEE</h3> 9 <ul> 10 <li> 11 テキストテキストテキストテキストテキストテキストテキストテキスト 12 テキストテキストテキストテキストテキストテキストテキストテキスト 13 テキストテキストテキストテキストテキストテキストテキストテキスト 14 テキストテキストテキストテキストテキストテキストテキストテキスト 15 </li> 16 <li> 17 テキストテキストテキストテキストテキストテキストテキストテキスト 18 テキストテキストテキストテキストテキストテキストテキストテキスト 19 テキストテキストテキストテキストテキストテキストテキストテキスト 20 テキストテキストテキストテキストテキストテキストテキストテキスト 21 </li> 22 <li> 23 テキストテキストテキストテキストテキストテキストテキストテキスト 24 テキストテキストテキストテキストテキストテキストテキストテキスト 25 テキストテキストテキストテキストテキストテキストテキストテキスト 26 テキストテキストテキストテキストテキストテキストテキストテキスト 27 </li> 28 <li> 29 テキストテキストテキストテキストテキストテキストテキストテキスト 30 テキストテキストテキストテキストテキストテキストテキストテキスト 31 テキストテキストテキストテキストテキストテキストテキストテキスト 32 テキストテキストテキストテキストテキストテキストテキストテキスト 33 </li> 34 </ul> 35 <a class="btn" href="#"><span>Read More</span></a> 36 </div> 37 </div> 38 </section>
css
1#about { 2 margin-top: 20px; 3} 4#about .about-img { 5 background-image: url(./img/about.jpg); 6 position: relative; 7} 8#about ul { 9 display: flex; 10 justify-content: space-between; 11 flex-wrap: wrap; 12 margin-bottom: 40px; 13 14} 15#about li { 16 width: 50%; 17 line-height: 2; 18 text-align: left; 19 padding: 2%; 20}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
親要素にかけていないんじゃないかと思い、試したがダメだった。
補足
特になし
回答3件
0
liに
box-sizing: border-box;
を追加してみてください。
投稿2024/02/27 02:01
総合スコア35
0
ulのliststyleをクリアにして、margin/paddingを0に
CSS
1#about ul { 2 list-style:none; 3 margin:0; 4 padding:0; 5}
liについてはpaddingを指定したいならその分marginを減らして
CSS
1#about li { 2 margin:-2%; 3 padding: 2%; 4}
投稿2024/02/26 06:51
総合スコア118408
0
子要素(#about li)の幅を50%に指定しているので折り返しません。
固定値に設定すれば幅の合計が画面幅を超えれば折り返すようになります。
50%(２列)で、画面幅がある幅より狭くなったら折り返したいということなら、 min-width で最小幅を固定値で設定すればいいでしょう。
css
1 width: 50%; 2 min-width: 300px;
※実際は左右余白分を考慮した幅にする必要があります。
padding: 2% なら、width: 46%;
かつ既定の余白をリセット
など
投稿2024/02/26 06:44
編集2024/02/26 06:57
総合スコア34377
あなたの回答
tips
プレビュー
2024/03/06 01:32
2024/03/06 08:35