flexboxで個数を固定した正方形の高さについて考える

おはようございます、スマホを家に忘れた佐伯です。
ところで最近の若者はスマホを携帯とは呼ばないらしいですね。
佐伯はガラケーを使ったことがある世代なので携帯電話のイメージが根強いんですけど、実際のところがどうなのか。私、気になります。

今回は昨日ちょっとハマったところをメモ書きにしてのこしておこうと思います。

等間隔配置にはうってつけのflexbox
割と最近実装された機能みたいで、周りに聞いてみると『は？なんそれ』という人も多いみたいです。
『flexboxってなんぞや？』という方は下記を参考にしてみてください。
・CSS Flexbox の基礎知識と使い方を詳しく解説

今回の要件は
『flexboxでアイテム個数を限定した時に正方形にするには？』
です

htmlとcss

<div class="container">
    <span class="flexItem" id="first"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
    <span class="flexItem"></span>
</div>

.container{
    box-sizing:border-box;
    display:flex;
    justify-content:space-around;
}
.flexItem{
    display:inline-block;
    width:24%;
}

まあ大体こんな感じ。稼働チェックしてません。
ようするに『４×２を作りたい』と思って下さい。

で、このflexItemを正方形で配置したいわけですけどここでクエスチョン。
いやちょっと待ってくれよ。
パーセント指定なのにどうやるの？？？？？？？？？
@media screen and (min-width:〇〇px)とブレークポイントごとにサイズを区切るのか？とも考えましたけど。
ブレークポイントから外れてるときは４×２にならない時も出て来ないか？？

少々脱線しますけど、スマホ（携帯ではない）の新作競争のおかげでブレークポイント業界ないしレスポンシブ業界はしっちゃかめっちゃかです。
因みにブレークポイントというのはレスポンシブデザインを組む際に切り替えの目安にする画面幅のことです。
なぜしっちゃかめっちゃかしているのかというとディスプレイのサイズが大きくなったり縦長になったりしてるタイプが出てきてるので、従来のブレークポイントが通用しなくなってきてるんですよね。

兎に角それが原因で固定値（height:〇〇pxと決め打ちしちゃう）のは上策とは言えない。
出来ることなら常にこの体裁を保っていたい、しかしパーセント表記…。しかも画面サイズはどうなるか分からない……。

そうだ、js使おう

結論から申し上げて佐伯的なベストは『Javascriptを使って横幅と高さを同じにしよう』でした。
さきにコードだけ書いてしまいます。

let wItem = document.getElementById("first").clientWidth;
$(".flexItem").css("height", wItem + "px");

取り敢えず『４×２』だけに拘るならこれで問題はないです。
ただ拘るのであれば、あくまでも感覚的な話ですがこれでいくと画面幅が大きくなった時に「待て待て待て待てデカいよ！！！！！！」となってしまったのでdivの範囲を絞ったりだとかそういうね、アレが必要ですよね。
その辺は模索中なので載せてません。もうちょっとなんとかなるはずなんや……。

一列に並べる個数を絞りたい時は単純に『個数/100』で出たパーセンテージを指定したらいいだけなので試してみて下さい。
私は16個の配置で悩んでます。４×４か８×２しかない。４×４が見た目が良いので固定したいけど自分のモニターで見るとめっちゃバランス悪い。（モニターが1920pxくらいある）
結論出たらまた書きたいな～～って思います～～～！！！

ところでこれ書いてる間に通知音聞こえてハ？と思ったら携帯ありました。本の間に挟まってた。