2022.04.14: conflicto de diseño flexible con posicionamiento de posición

Situación : hoy en día, el método flexible se usa a menudo en el diseño . Una vez coloqué el elemento B después del diseño flexible, y luego agregué el posicionamiento de posición al elemento B, y descubrí que los elementos secundarios no podían estirar el elemento B.

<!DOCTYPE html>
<html>
<head lang="zh-CN">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>flex布局与position定位存在冲突</title>
 <style>
    * {
        padding: 0;
        margin: 0;
    }
    #container {
        background-color: #cccccc;
        width: 500px;
        height: 300px;
        /* 添加的定位css */
        position: relative;
    }
    #content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
        /* 添加的定位css */
        position: absolute;
        top: 100px;
    }
    #content li {
        width: 50px;
        height: 50px;
        margin: 5px;
        list-style: none;
        background-color: burlywood;
    }
 </style>
</head>
<body>
    <div id="container">
        <ul id="content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

Solución uno :

Establezca manualmente el ancho al 100% para #contenido

#content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
        /* 添加的定位css */
        position: absolute;
        top: 100px;
        /* 手动设置宽度为100% */
        width: 100%;
    }

Solución dos :

Envuelva una capa para #contenido

<div id="container">
        <div class="box">
           <ul id="content">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul> 
        </div>
    </div>

#content {
        background-color: rgb(0, 174, 255);
        display: flex;
        justify-content: space-around;
    }
    .box {
        /* 添加的定位css */
        position: absolute;
        top: 100px;
        /* 手动设置宽度为100% */
        width: 100%;
    }

Expansión: Por qué posición: absoluto; Después del posicionamiento absoluto, el flex del nivel inferior no funciona, y la razón por la cual la posición y el flex no se pueden usar juntos es que el padre no hereda el ancho del abuelo (nivel superior) después del Se separa la posición, y el padre adapta el ancho según el contenido arriba. Así que el nieto flex ya no es obediente a su padre, por lo que tiene que darle a su padre un porcentaje de banda ancha para evitar conflictos.

Declaración de derechos de autor: este artículo es un artículo original de blogger, siguiendo el acuerdo de derechos de autor CC 4.0 BY-SA, adjunte el enlace de la fuente original y esta declaración para su reimpresión.
Enlace a este artículo: https://blog.csdn.net/hl_qianduan/article/details/114578389
—————————————————
Declaración de derechos de autor: este artículo es el artículo original de CSDN blogger "Heerey525", siguiendo el acuerdo de derechos de autor CC 4.0 BY-SA, adjunte el enlace de la fuente original y esta declaración para su reimpresión.
Enlace original: https://blog.csdn.net/hl_qianduan/article/details/114578389

2022.04.14: conflicto de diseño flexible con posicionamiento de posición

Supongo que te gusta