Flexboxで要素のリストを折り返し表示した時に、一部の要素だけが大きくなるのをCSSで防ぐ

# 出来るようになる事

親要素のサイズが変更された時、真ん中の状態を経由せずに、縦並びと横並びを切り替える
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/b7581a3e-30ea-1a1c-ad53-8bb82e024e0f.png)
[画像引用元](https://heydonworks.com/article/the-flexbox-holy-albatross/)

# なぜこの処理が必要？
一部の要素だけが大きくなると、大きく表示される要素をオススメのコンテンツだと勘違いしてしまう事があるから

# 実装する

## Flexbox内の要素のサイズを自動で変更する

- 最小幅 : 親要素の33%
- 最大幅 : 親要素の100%

で子要素のサイズが自動で変更されるようになりました。


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwrrKJE" data-editable="true" data-user="lp0ql" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/lp0ql/pen/VwrrKJE">
  Qiita-612c3c82f4238fcab2b1-1</a> by lp0ql (<a href="https://codepen.io/lp0ql">@lp0ql</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## flex-basis

``flex-basis``は、子要素の基本幅（子要素になってほしいサイズ）を設定します。すると、Flexbox内で、なるべく``flex-basis``に指定したサイズに近づくようにブラウザが調整してくれます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ZEaaBBX" data-editable="true" data-user="lp0ql" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/lp0ql/pen/ZEaaBBX">
  Qiita-612c3c82f4238fcab2b1-2</a> by lp0ql (<a href="https://codepen.io/lp0ql">@lp0ql</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 999rem, -999rem
``flex-basis``で``999rem``や``-999rem``等の値を設定すると、なるべく要素を大きく又は小さくしようとします。

しかし、``min-width``と``max-width``によって阻まれるので、``999rem``の時は``max-width``で指定されたサイズである``100%``に、

``-999rem``の時は
![スクリーンショット 2022-02-16 14.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/4b94a2b8-d24b-4c24-6dbc-e26b80edb710.png)
このように値が無効になり、``min-width``で設定された``33%``になります。
([最初](https://codepen.io/lp0ql/pen/VwrrKJE)と同じ状態)

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635641/38b0d6d0-d8c3-9e23-e0d3-fe6701cfdd56.png)
[画像引用元](https://heydonworks.com/article/the-flexbox-holy-albatross/)

## 999 と -999 を親要素のサイズで切り替える

``calc(40rem - 100%)`` この計算を行う事で、親要素が``40rem``以上の時に結果が負になり、``40rem``より小さい時に``正``の数になります。

これを利用して

```
flex-basis: calc(40rem - 100%) * 999);
```
とする事で、``flex-basis``に``非常に高い値``または``非常に低い値``を設定します。そして、このような状況では``999``を使うのが一般的なようです。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="KKyyNaW" data-editable="true" data-user="lp0ql" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/lp0ql/pen/KKyyNaW">
  Qiita-612c3c82f4238fcab2b1-2</a> by lp0ql (<a href="https://codepen.io/lp0ql">@lp0ql</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# @ media よりもこの方法が良い理由
ビューポートのサイズに関係なく利用出来るので、任意の横幅の親要素内で利用する事が出来る


# 参考
[heydonworks.com - The Flexbox Holy Albatross](https://heydonworks.com/article/the-flexbox-holy-albatross/)

# 最後に
間違い・アドバイスがあれば是非教えて下さい！