HTML5（八）——伸缩布局

最新推荐文章于 2021-06-15 14:52:23 发布

C-A-L-D

最新推荐文章于 2021-06-15 14:52:23 发布

阅读量449

点赞数 1

分类专栏： Web前端-html5

本文链接：https://blog.csdn.net/qq_42952262/article/details/105354087

版权

Web前端-html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

基本样式设置

父容器：display: flex;

子元素：justify-content、flex-flow

/* 设置父容器为伸缩盒子 */

display: flex;

/* 设置子元素的排列方式 */

/* flex-start 让子元素在起始位置排列

flex-end 让子元素在末尾位置排列

center 让子元素居中排列

space-between 让子元素左右对齐父元素开始和结束位置，中间平均分隔

space-around 所有子元素左右间隔一样*/

justify-content: space-around;

/* 设置行/列排列，达到最大宽度换行和倒置顺序 */

/* row 行排列

cloumn 列排列

nowrap 不换行

wrap 换行

row-reverse 行排列并倒置顺序

cloumn-reverse 列排列并倒置顺序

wrap-reverse 换行并倒置顺序*/

flex-flow:wrap;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        body {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }
        .box {
            width: 900px;
            height: 900px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            position: relative;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;

            /* 设置父容器为伸缩盒子 */
            display: flex;

            /* 设置子元素的排列方式 */
            /*  flex-start  让子元素在起始位置排列
                flex-end    让子元素在末尾位置排列
                center      让子元素居中排列
                space-between   让子元素左右对齐父元素开始和结束位置，中间平均分隔 
                space-around    所有子元素左右间隔一样*/
            justify-content: space-around;

            /* 设置行/列排列，达到最大宽度换行和倒置顺序 */
            /*  row     行排列
                cloumn  列排列
                nowrap  不换行
                wrap    换行
                row-reverse 行排列并倒置顺序
                cloumn-reverse  列排列并倒置顺序
                wrap-reverse 换行并倒置顺序*/
            flex-flow:wrap;
        }
        .box > div {
            width: 200px;
            height: 200px;
        }
        .box > div:nth-of-type(1) {
            background-color: red;
        }
        .box > div:nth-of-type(2) {
            background-color: green;
        }
        .box > div:nth-of-type(3) {
            background-color: blue;
        }
        .box > div:nth-of-type(4) {
            background-color: orange;
        }
        .box > div:nth-of-type(5) {
            background-color: pink;
        }
    </style> 
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

其他属性

flex:比例值 让各子元素按比例宽度填充父容器（经常被用到）

作用对象：子元素

        .box > div {
            width: 200px;
            height: 200px;
        }
        .box > div:nth-of-type(1) {
            background-color: red;
            flex: 2;
        }
        .box > div:nth-of-type(2) {
            background-color: green;
            flex-shrink: 1;
            flex: 3;
        }
        .box > div:nth-of-type(3) {
            background-color: blue;
            flex: 1;
        }
        .box > div:nth-of-type(4) {
            background-color: orange;
            flex: 2;
        }
        .box > div:nth-of-type(5) {
            background-color: pink;
        }