WordPressの記事一覧(archive.phpなど)を横に3つずつで表示したいです。
横並びにするには flex が良いといろいろな所で見たので調べてみましたが、よく理解できません。
以下のCSSですと、投稿数が3の倍数ではないカテゴリーなどの場合に右と左にそれぞれ寄ってしまって真ん中がかなり空いてしまいます。
php
1<ul class="list"> 2<?php if(have_posts()): while(have_posts()): the_post(); ?> 3<li class="list-item">~~省略~~</li> 4<?php endwhile; endif; ?> 5</ul>
css
1.list{ 2 list-style:none; 3 display:flex; 4 flex-direction:row; 5 flex-wrap:wrap; 6 justify-content:space-between; 7 align-items:flex-start; 8 align-content:space-around; 9 align-items:stretch 10} 11.list-item{ 12 width:calc(95% / 3); 13 margin:10px 14}
justify-content を flex-start にすると2つ目が左に寄ってくれますが、今度は3の倍数の数の記事があるカテゴリだと右側が大きく空いてしまいます(左に寄っているので当たりまえですが)。
本当は「list-item」の width を calc(100% / 3) にしたいのですが、そうすると隙間がなくなってしまい、どうしたら良いのか分からなくなって95%としました。
わかりにくいかもしれないのですが、
↑こうなるので、こうしたい↓ です。
おとなしく float を使ったほうが良いでしょうか。
回答4件
あなたの回答
tips
プレビュー