时间戳

首页 > 解决方案 > 为什么我需要在代码中使用 `display: flex` 来获取长宽比技术？

html - 为什么我需要在代码中使用 `display: flex` 来获取长宽比技术？

问题描述

我写了以下代码，参考链接。（参考文章是日文的，我只是想说明一下，我是作为参考用的，所以看不懂参考文章也没关系）

我编写了代码来制作如下所示的正方形，但我不知道为什么display: flex需要这种技术。

display: flex使它起作用的规范是什么？

CSS 代码：

.squareBasedOnWidth {
    display: flex;
}
.squareBasedOnWidth:before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    padding-bottom: 100%;
}

HTML 代码：

<div style="width: 100px; background-color: green;">
    <div class="squareBasedOnWidth"></div>
</div>

我读了你的回复并想知道它，所以我试了一下。您评论中的代码确实有效，但是当我从头开始尝试时，它没有用。

与flex：

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth {
        display: flex;
    }
    .squareBasedOnWidth:before{
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth"></div>
    </div>
</body>

</html>

没有flex：

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth:before{
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth"></div>
    </div>
</body>

</html>

噢，我明白。

我只是删除flex并添加block到squareBasedOnWidth:befor，对吗？

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth:before{
        display: block;
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth"></div>
    </div>
</body>

</html>

然而，当元素被放置在里面时，运动似乎发生了变化。

带有flex, 和内部元素。

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth {
        display: flex;
    }
    .squareBasedOnWidth:before{
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth">
            Foo <!-- inside element -->
        </div>
    </div>
</body>

</html>

没有flex和添加block, 和内部元素。

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth:before{
        display: block;
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth">
            Foo <!-- inside element -->
        </div>
    </div>
</body>

</html>

如果我指定block而不是flex，我将无法获得高度。指定填充的元素只是突出。

这是为什么？为什么会flex得到高度？

<!DOCTYPE html>
<html>

<head>
    <style>
    .squareBasedOnWidth {
        display: block;  /* replace to block */
    }
    .squareBasedOnWidth:before{
        content: "";
        width: 0;
        height: 0;
        padding-bottom: 100%;
    }
    </style>
</head>

<body>
    <div style="width: 100px; background-color: green;">
        <div class="squareBasedOnWidth">
            Foo <!-- inside element -->
        </div>
    </div>
</body>

</html>

标签： htmlcss

解决方案

如今，aspect-ratio变得广泛可用。适用于最新的 Edge、Chrome、Firefox 和 Safari 浏览器。https://caniuse.com/?search=aspect-ratio

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

CSS 属性设置框的aspect-ratio 首选纵横比，将用于计算自动尺寸和其他一些布局功能。

试一试并放弃伪技巧：

<!DOCTYPE html>
<html>

<head>
  <style>
    .squareBasedOnWidth {
      width: 100px;
      background-color: green;
      aspect-ratio: 1 / 1;
    }
    .squareBasedOnHeight {
      height: 100px;
      background-color: tomato;
      aspect-ratio: 1 / 1;
    }
  </style>
</head>

<body>
  <div class="squareBasedOnWidth">
    calculated from width
  </div>
  <hr>
  <div class="squareBasedOnHeight">
    calculated from height 
  </div>
</body>

</html>

推荐阅读