弹性布局-2

最新推荐文章于 2024-07-21 21:06:06 发布

sunset0827

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量319

点赞数

分类专栏： H5学习文章标签： H5 弹性布局定宽居中

本文链接：https://blog.csdn.net/Mr_Sunset/article/details/80992485

版权

H5学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

弹性布局实现定宽居中

建议将代码复制到vscode然后保存在浏览器打开对比代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #c1 {
            background-color: yellow;
        }

        #b1 {
            background-color: red;
            height: 50px;
            width: 800px;
            margin: 0 auto;
        }

        #c2 {
            background-color: yellow;
            display: flex;
        }

        #b2,#b3,#b4 {
            border: 1px solid #000;
            height: 50px;
        }

        #b2{
            background-color: cyan;

            /* flex-grow，当父元素在布局方向上有多余的空间时，本元素占有这些空间的比例，（当父元素变大时，本元素是否随之变大） */
            /* flex-grow的默认值为0 */
            flex-grow: 1;
        }

        #b3{
            background-color: greenyellow;
            width: 800px;
            /* flex-shrink: 当父元素缩小时，没有足够空间显示本元素时，本元素随之缩小的比例，默认为1，设置为0即可不随父元素缩小 */
            flex-shrink: 0;
        }

        #b4{
            background-color: lightcoral;
            flex-grow: 1;
        }

        #c3{
            display: flex;
        }

        #b5,#b6{
            height: 50px;
        }
        #b5{
            width: 700px;
            background-color: green;
        }
        #b6{
            background-color: purple;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div id="c1">
        <div id="b1"></div>
    </div>

    <br>

    <div id="c2">
        <div id="b2"></div>
        <div id="b3"></div>
        <div id="b4"></div>
    </div>

    <br>

    <div id="c3">
        <div id="b5"></div>
        <div id="b6"></div>
    </div>
</body>

</html>

sunset0827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性布局-2

弹性布局实现定宽居中建议将代码复制到vscode然后保存在浏览器打开对比代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
复制链接

扫一扫

专栏目录