为什么我需要在代码中使用 `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并添加blocksquareBasedOnWidth: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>

尼科

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

使用

display: flex;

.squareBasedOnWidth {
   display: flex;
}
.squareBasedOnWidth:before {
   background-color: yellow;
   content: "1";
   width: 10px;
   height: 0;
   padding-bottom: 100%;
}
<div style="width: 100px; background-color: green;">
   <div class="squareBasedOnWidth">
      2
   </div>
</div>

你的伪元素变成了一个弹性项目。默认情况下,Flex 项目从左到右对齐。“squareBasedOnWidth”中的内容在您成为伪元素之后呈现为第二列。因为您将伪元素的宽度设置为 0,所以“sqaureBasedOnWidth” div 中的所有内容都呈现在左上角。

将其设置为

display: block

“sqaureBasedOnWidth”中的所有内容都呈现在高度为 100% 的伪元素下方。您不再保持纵横比,因为您的盒子现在是 100% +“sqaureBasedOnWidth”内内容的高度。

.squareBasedOnWidth:before {
   background-color: yellow;
   display: block;
   content: "";
   width: 100%;
   height: 0;
   padding-bottom: 100%;
 }
<div style="width: 100px; background-color: green;">
   <div class="squareBasedOnWidth">
      block element
   </div>
 </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用 display flex 实现此设计?

为什么在使用display:flex时我的div消失了?

为什么我需要在下面的代码中使用 [6] 来切出时间?

同时使用display:none和display:flex;

为什么我需要在函数中使用数组解构来重新呈现组件?

使用display flex将多个项目居中

如何使用Display Flex使多个元素重叠

“ flex:...”是否暗示“ display:flex”?

display:inline-flex和display:flex有什么区别?

为什么(display:flex)表现得像继承的属性?

删除display:flex会在链接周围添加空格。为什么?

不能用 display 来证明列:flex (NO BOOTSTRAP)

为什么在Vue范围内的scss上不使用Display Flex属性,为什么?

display:flex是继承的吗?

为什么display:block和display:flex渲染同一元素但高度不同?

我的 display:flex 没有正确包装我的内容

为什么需要在Objective-C的头文件中使用“外部静态”来定义常量?

尽管使用了 display:flex,为什么这两个元素垂直偏移?

我应该使用display:块,还是应该始终使用display:flex?

使用display:flex时文本溢出不起作用

CSS:使用display:flex定位元素的麻烦

使用display flex移除之前的下划线

使用display:flex用CSS填充剩余的垂直空间

使用 display:grid 模拟 flex-direction:row

在几乎所有东西上都使用display:flex

如何使用display flex代替左浮动和右浮动

使用 display:flex 水平和垂直居中图像

如何使用display:flex将图像相互叠加?

除非使用display flex,如何对齐不起作用的项目?