flex布局align-items的默认值stretch

lianflower

已于 2022-09-02 17:21:41 修改

阅读量720

点赞数

文章标签： html 前端 servlet

于 2022-09-02 16:04:51 首次发布

本文链接：https://blog.csdn.net/lianflower/article/details/126665135

版权

Css 专栏收录该内容

33 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css中子容器不会继承父容器的高度 */
        .parent {
            height: 500px;
            border: red solid 1px;
        }
        .child {
            border: green solid 1px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">child</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css中子容器不会继承父容器的高度，但是当我们将父容器设置为flex布局后，
            发现子容器的高度发生了变化，它变得和父容器一样高，
                其实这是因为flex布局align-items的默认值为stretch，它会拉伸项目的长度 */
        .parent {
            height: 500px;
            border: red solid 1px;
            display: flex;
        }
        .child {
            border: green solid 1px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">child</div>
    </div>
</body>
</html>