【html/css】%で横幅を指定し、縦幅も横幅と同じにしたいのですがどうしたらよいでしょうか？

%で横幅を指定し、縦幅も横幅と同じにしたいのですがどうしたらよいでしょうか？

【html】
<div class="a">
<div class="b">りんご</div>
<div class="b">ばなな</div>
<div class="b">ぶどう</div>
</div>

【css】
.a{
display:flex;
width:800px}

.b{
width:32%
}
.b+.b{
margin-left:2%;
}

No.2 回答者： fujillin 回答日時： 2019/03/27 10:05

こんにちは

親要素のサイズを絶対値指定しているので、先に計算して800×0.32＝256pxを指定するのなら簡単ですが、あくまでも％で指定したいということですよね？

単位の％そのままではなく、0.32倍という指定方法でも良ければ、親要素の幅をCSS変数にしておいて、それを基に計算するという方法が使えるかも知れません。
（等間隔配置なら、space-betweenを利用しておく方が柔軟性があるかも知れません。）
.a{
--boxWidth: 800px;
display: flex;
justify-content: space-between;
width: var(--boxWidth);
}

.b{
background-color: #CCF; /* 確認用カラー */
width: calc(var(--boxWidth) * 0.32);
height: calc(var(--boxWidth) * 0.32);
}

対応していないブラウザが存在するかも知れませんのでご注意。
https://developer.mozilla.org/ja/docs/Web/CSS/Us …


一方で、親要素の幅が画面幅と同じ（または一定比率）である場合は、単位vwを利用して 32vwを高さ・幅ともに指定することで簡単に設定可能です。
別の方法として、まず固定サイズで正方形に作成しておいて、transform scaleで32％になるように拡大（縮小）するという方法も考えましたが、文字サイズ等が一緒に影響を受けてしまうので、没としました。

また、ご質問の範囲からは外れてしまいますが、スクリプトで「幅と同じ高さを設定する」という方法も考えられます。

No.1 回答者： t_fumiaki 回答日時： 2019/03/26 16:47

これはハマリ処。

%は親要素に対するもの。
また、高さ基準が無いから上手く行かない。

で、裏技が1個。

先ず、width:32%は、正しくwidth:32%;として;を入れる。

で、.bに以下を追加して値を調整する。

padding-bottom:32%;

色々試す場合は、各要素にborderを設定して、どういう矩形になるかを確認する様に。