前提・実現したいこと
wordpressの記事を、以下のように4つずつ並べたいです。
記事1 記事2 記事3 記事4
記事5 記事6 記事7 記事8
しかし記事は日々増えていくので、4の倍数になるとは限りません。
例えば
記事9 記事10
だけになった時、この二つを旨い具合に均等に配置したいです。
試したこと
flexboxを使うのではと調べてみました。しかし思うような配置にはなりませんでした。
追記(20/3/14 17:30)
- スースコード
HTML
1<div class="container"> 2 <div class="item">記事を取得する処理</item> 3 <!-- 5個のitemがあります --> 4</div>
css
1.container { 2 display: flex; 3 align-items: center; 4 flex-wrap: wrap; 5 justify-content: center; 6} 7 8.item { 9 flex: 0 1 25%; // 4つ横に並べたいので、100/4で25%としました。 10 margin: 15px; 11}
- 結果
- 理想
4n+1個の場合:下段のtest2が上に、てstが真ん中に
> この二つを旨い具合に均等に配置したいです。
とは具体的にどのようにならべたいのでしょうか。
「旨い具合」では他人には伝わりません。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
justify-content: space-aroundのような配置を目指しています。
要素が一つ:中央に
要素が二つ:左右に
要素が三つ:真ん中と左右に
display: flex;
justify-content: space-around;
でそのようになると思いますが、なりませんか。
justify-content: space-between;
ではどうですか。
もし、ならないなら、現状のHTMLとCSSを質問に追記してください。
ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
結果(実際に起きたこと)を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー