[Flexbox]左詰めにしつつ両端はコンテナに合わせて配置する方法

結論：「ダミーアイテム（幽霊ボックス）」を使用する方法

display:flex;  flex-wrap:wrap; を使用してアイテムを配置させていた時、折り返したアイテムが左づめに折り返して欲しいのに、このような挙動になってしまったことがありました。

Flexboxアイテムの折り返しの挙動

アイテムを両端の幅に合わせたかった為に
justify-content:space-between;を使用していたことが原因。
そこでjustify-content: flex-start; にしてみると、

思った通り左づめにはなりますが、
今度は両端に合わせたいという想いは叶わず。

どうしたものか調べてみると、
ダミーアイテム（幽霊ボックス）というのを使用するといいことがわかったのでメモしておきます🌹🌒

.flex-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; // 両端にアイテムを揃えて配置
    &::after {
        content: "";
        flex-grow: 999999999; // 余分なスペースを埋めるためのダミーアイテム
    }
}

「ダミーアイテム（幽霊ボックス）」とは

視覚的には存在しないけれど、Flexboxのレイアウト計算には含まれるアイテムのことです。

このダミーアイテムを使用することで
   justify-content: space-between;
を使いつつ、折り返し時の左寄せも実現することができました👨‍❤‍👨

どうでしょうか。とても魅力的なアイテムですよね🦊💖

Flexboxのレスポンシブ時の挙動で、
いつも何かしらハマってしまうので
ひとつずつ、メモしていこうと思います👍

では、また。