HTML入门（flex布局实现定宽居中）————DAY6

最新推荐文章于 2024-02-26 17:29:47 发布

好吃的都给你呀

最新推荐文章于 2024-02-26 17:29:47 发布

阅读量171

点赞数 1

分类专栏：前端杂文文章标签： HTML flex 定宽居中

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102601925

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>
        body{
            background-color: bisque;
        }
        #s1{
            border: solid 5px white;
            height: 200px;
            /* 把里面元素布局格式设置成  flex*/
            display: flex;
        }
        .box1{
            border: solid 3px white;
            flex-basis: 200px;
        }
        #d1{
            /* flex-grow：当flex布局的父元素布局方向上的空间大于所有子元素的长度时
            额外的长度分配给这个子元素多少(按比例分配) , 默认为0 */
            flex-grow: 3;
            /* 解决子元素超出父元素的界面缩减问题
            如果一共有3个子元素，宽度分别200，而父元素宽度为400，有200没办法存储
            这时，需要三个子元素各自缩减而使子元素依旧完整的显示
            默认的flex-shrink值为1，比如设置其中一个为2，那么就会是1+1+2=4
            超出的界面分为4份，而设置为2的那一个子元素需要承担2份，缩减100个单位 */
            flex-shrink: 1;
        }
        #d2{
            flex-grow: 1;
            flex-shrink: 0;
        }
        #d3{
            flex-grow: 0;
            flex-shrink: 1;
        }
        #s2{

        }
    </style>
</head>
<body>
    <section id="s1">
        <div id="d1" class="box1">
            占用了额外空间的3/5(默认其他的为1，一共有三个，1+1+3=5)
            如果有超出，则自己承担1/2
        </div>
        <div id="d2" class="box1">占用额外空间的1/5 如果有超出，自己不负责承担</div>
        <div id="d3" class="box1">无权占用额外空间，如果超出，占用1/2</div>
    </section>

    <section id="s2">
        <div id="d3" class="box"></div>
        <div id="d4" class="box"></div>
        <div id="d5" class="box"></div>
    </section>
</body>
</html>