画面幅に合わせて可変する正方形が、フレックスボックスで崩れる。

Question

webデザイン勉強中のものです。

画面幅に合わせて可変する正方形を作成したいのですが、

html

<div class="square"> <div class="square_inner"></div>

</div>

css

.square{
width: 100%;
background-color:任意;
}

.square_inner{
padding-bottom: 100%;
}

で可変する正方形は作成できるのですが、

その正方形を
フレックスボックスの中に入れると
くずれて、縦長の長方形になってしまいます。

フレックスボックスが関係していることはなんとなくわかるのですが、
上記のスタンダードなコードを、どう修正すればフレックスボックス内でも
可変する正方形を作れるのか、教えていただけますと助かります。

Comments

[hatena19]

現象の再現できるコードを提示してください。
フレックスボックスを設定した要素のHTML
フレックスボックスのCSS設定

[Lhankor_Mhy]

試してみましたが、親要素に`display: flex`を当てただけでは問題が再現しませんでした。
問題が再現する詳しい手順を教えてください。

Answer 1

ご回答くださった方、ありがとうございました。

また遅くなりまして申し訳ありません。

正方形にならなかったのはフレックスボックスのせいではありませんでした。

画像を正方形の形で入れたかったのですが、
その画像の分、四角がのびたような見た目になっていただけでした。（正方形+画像サイズ）

混乱させてしまいまして申し訳ありません。
下記のようなCSSで解決しました。

css

.square
width: 100%;
position: relative;
padding-bottom: 100%;
}

.square_inner{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
object-position: center;
}

Answer 2

具体的なコードをご提示いただいていないので想像ですが、.square 以外にも要素があり、交差軸が伸びているのではないかと思います。
align-itemsは何も指定しないと初期値のnormalになり、フレックスレイアウトの場合stretchと等価になるので交差軸方向（つまり、高さ）にフレックスアイテムが伸びてしまいます。

ですので、align-items: startとしてみてはどうでしょうか。

    body { /* フレックスコンテナを指定してください */
      display: flex;
      align-items: start;
    }

または、.square の高さを指定してしまってもいいかもしれません。

    .square {
      width: 100%;
      background-color: gray;
      height: max-content;
    }

---

参考：

stretch

アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。

align-items - CSS: カスケーディングスタイルシート | MDN