wordpressの記事のような、常に数が一定ではない要素を横並びに配置したいです。

Question

前提・実現したいこと

wordpressの記事を、以下のように4つずつ並べたいです。

記事1　記事2　記事3　記事4
記事5　記事6　記事7　記事8

しかし記事は日々増えていくので、4の倍数になるとは限りません。
例えば
記事9　記事10
だけになった時、この二つを旨い具合に均等に配置したいです。

試したこと

flexboxを使うのではと調べてみました。しかし思うような配置にはなりませんでした。

追記(20/3/14 17:30)

• スースコード

<div class="container">
    <div class="item">記事を取得する処理</item>
    <!-- 5個のitemがあります -->
</div>

.container {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
}

.item {
            flex: 0 1 25%; // 4つ横に並べたいので、100/4で25%としました。
            margin: 15px;
}

• 結果

• 理想

4n+1個の場合:下段のtest2が上に、てｓｔが真ん中に

Comments

[hatena19]

> この二つを旨い具合に均等に配置したいです。
とは具体的にどのようにならべたいのでしょうか。
「旨い具合」では他人には伝わりません。

[退会済みユーザー]

justify-content: space-aroundのような配置を目指しています。
要素が一つ:中央に
要素が二つ:左右に
要素が三つ:真ん中と左右に

[hatena19]

display: flex;
justify-content: space-around;
でそのようになると思いますが、なりませんか。
justify-content: space-between;
ではどうですか。
もし、ならないなら、現状のHTMLとCSSを質問に追記してください。

[Lhankor_Mhy]

ソースコードを書きましょう
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

Answer 1

ご提示のコードで問題なくご希望の通りになります。
サンプル

.item {
            flex: 0 1 25%; // 4つ横に並べたいので、100/4で25%としました。
            margin: 15px;
/* //はCSSではコメント文にならないため、
// 4つ横に並べたいので、100/4で25%としました。margin: 15px;
というルールだと読まれて、無効。 */
}

という意地悪な回答はさておき。

マージン分をcalcで引けばオッケーです。
サンプル

.item {
            flex: 0 1 calc( 25% - 15px * 2 ); 
            margin: 15px;
}

Comments

[退会済みユーザー]

ここ最近SASSを使っていたので、CSSのコメントアウトの方法を忘れていました。
marginが悪さをしていたのですね。ありがとうございます。