美文网首页
伸缩布局（css3）

伸缩布局（css3）

作者: 潘肚饿兵哥哥 | 来源:发表于2019-05-31 00:35 被阅读0次

CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink与 flex-basis。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

  • 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为main start 和main end。
  • 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
  • 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article>) 元素。
image.png

弹性布局盒子写法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*section {*/   /*这是以前的三等分布局*/
        /*    width: 80%;*/
        /*    height: 200px;*/
        /*    border: 1px solid #ccc;*/
        /*    margin: 100px auto;*/
        /*}*/
        /*section div{*/
        /*    width: 33.33%;*/
        /*    height: 100%;*/
        /*    float: left;*/
        /*}*/
        /*section div:nth-child(1) {*/
        /*    background-color: pink;*/
        /*}*/
        /*section div:nth-child(2) {*/
        /*    background-color: aliceblue;*/
        /*}*/
        /*section div:nth-child(3) {*/
        /*    background-color: darkcyan;*/
        /*}*/


        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*父级盒子添加flex*/
            display: flex;  /*伸缩布局模式*/
            min-width: 400px;/*添加盒子展开尺寸的最小值*/
            max-width: 1280px;/*添加弹性盒子展开尺寸的最大值*/
        }
        section div {
            height: 100%;
            /*flex: 1; 先给父盒子section添加模式display: flex;再给子盒子分份数，而且这是响应式的，这里也可以写给子盒子，给子盒子分不同的份数*/
        }
        section div:nth-child(1) {
            background-color: #ff697a;
            flex: 1;
        }
        section div:nth-child(2) {
            background-color: darkcyan;
            margin: 0 5px;  /*上下0  左右5px*/  /*而且，传统布局加了margin盒子会被挤掉下去，但是flex布局加了margin也不会挤掉下去，他会自动等分*/
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: lightseagreen;
            flex: 1;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>
image.png

不但可以设置份数，子盒子的宽度还可以写成固定的值：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*section {*/   /*这是以前的三等分布局*/
        /*    width: 80%;*/
        /*    height: 200px;*/
        /*    border: 1px solid #ccc;*/
        /*    margin: 100px auto;*/
        /*}*/
        /*section div{*/
        /*    width: 33.33%;*/
        /*    height: 100%;*/
        /*    float: left;*/
        /*}*/
        /*section div:nth-child(1) {*/
        /*    background-color: pink;*/
        /*}*/
        /*section div:nth-child(2) {*/
        /*    background-color: aliceblue;*/
        /*}*/
        /*section div:nth-child(3) {*/
        /*    background-color: darkcyan;*/
        /*}*/


        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*父级盒子添加flex*/
            display: flex;  /*伸缩布局模式*/
            min-width: 400px;/*添加盒子展开尺寸的最小值*/
            max-width: 1280px;/*添加弹性盒子展开尺寸的最大值*/
        }
        section div {
            height: 100%;
            /*flex: 1; 先给父盒子section添加模式display: flex;再给子盒子分份数，而且这是响应式的，这里也可以写给子盒子，给子盒子分不同的份数*/
        }
        section div:nth-child(1) {
            background-color: #ff697a;
            /*flex: 1;*/
            width: 300px;/*这里不写份数，直接固定宽度的话，剩下的宽度，会继续按照第二和第三两个盒子的份数自动划分，而且，当浏览器宽度改变时，这个盒子的宽度也是固定不变的，只有二 、 三盒子的宽度会改变*/
        }
        section div:nth-child(2) {
            background-color: darkcyan;
            margin: 0 5px;  /*上下0  左右5px*/  /*而且，传统布局加了margin盒子会被挤掉下去，但是flex布局加了margin也不会挤掉下去，他会自动等分*/
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: lightseagreen;
            flex: 1;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>
image.png

伸缩布局排列方式
水平和垂直排列：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*section {*/   /*这是以前的三等分布局*/
        /*    width: 80%;*/
        /*    height: 200px;*/
        /*    border: 1px solid #ccc;*/
        /*    margin: 100px auto;*/
        /*}*/
        /*section div{*/
        /*    width: 33.33%;*/
        /*    height: 100%;*/
        /*    float: left;*/
        /*}*/
        /*section div:nth-child(1) {*/
        /*    background-color: pink;*/
        /*}*/
        /*section div:nth-child(2) {*/
        /*    background-color: aliceblue;*/
        /*}*/
        /*section div:nth-child(3) {*/
        /*    background-color: darkcyan;*/
        /*}*/


        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*父级盒子添加flex*/
            display: flex;  /*伸缩布局模式*/
            min-width: 400px;/*添加盒子展开尺寸的最小值*/
            max-width: 1280px;/*添加弹性盒子展开尺寸的最大值*/
            flex-direction: column; /*row 默认值，水平   column竖排 垂直*/
        }

        section div:nth-child(1) {
            background-color: #ff697a;
            flex: 1;
        }
        section div:nth-child(2) {
            background-color: darkcyan;
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: lightseagreen;
            flex: 1;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>
image.png

翻转显示：

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*父级盒子添加flex*/
            display: flex;  /*伸缩布局模式*/
            min-width: 400px;/*添加盒子展开尺寸的最小值*/
            max-width: 1280px;/*添加弹性盒子展开尺寸的最大值*/
            flex-direction: row-reverse; /*row 默认值，水平   column竖排 垂直   row-reverse水平翻转显示   column-reverse垂直翻转显示*/
        }

        section div:nth-child(1) {
            background-color: #ff697a;
            flex: 1;
        }
        section div:nth-child(2) {
            background-color: darkcyan;
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: lightseagreen;
            flex: 1;
        }
    </style>
</head>
<body>
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
</body>
</html>
image.png

携程网伸缩布局案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        body {
            min-width: 320px;/*页面最小不低于320像素宽*/
            max-width: 540px;
            margin: 0 auto;
        }
        header {
            width: 100%;/*继承body的宽度*/
            height: 100px;
        }
        header img {
            width: 100%;/*继承header的宽度*/
            height: 100%;
        }
        nav {
            padding: 5px;
        }
        .row {
            height: 90px;
            width: 100%;
            background-color: #ff697a;
            border-radius: 8px;
            /*margin: 5px 0;这里给div  margin值不合适，给navpadding值更好*/
            display: flex;  /*伸缩布局，要给父级加这个属性*/
            margin-bottom: 5px;
        }
        nav .row:nth-child(2) {
            background-color: #3d98ff;
            
        }
        nav .row:nth-child(3) {
            background-color: #44c522;
        }
        nav .row:nth-child(4) {
            background-color: #fc9720;

        }
        .row3 {
            flex: 1; /*每个子级占一份*/
            border-left: 1px solid #fff;
        }
        .row div:first-child { /*这里最好不要直接写riw3，因为不一定只有这里用row3*/
            border: 0;
        }
        .hotel {
            display: flex;
            flex-direction: column;/* 垂直排列 */
        }
        .hotel a {
            flex: 1;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 45px;
            text-decoration: none;/*取消下划线*/
            text-shadow: 0 2px 2px rgba(0, 0, 0, .6)/*文字阴影：  水平  垂直 模糊距离  颜色*/
        }
        .hotel a:first-child {
            border-bottom: 1px solid #fff;
        }
    </style>
</head>
<body>
<header>
    <img src="images/ctrip.jpg" alt="">
</header>
<nav>
   <div class="row">
       <div class="row3"></div>
       <div class="row3 hotel">
           <a href="#">海外酒店</a>
           <a href="#">特价酒店</a>
       </div>
       <div class="row3 hotel">
           <a href="#">团购</a>
           <a href="#">民宿客栈</a>
       </div>
   </div>
    <div class="row">
        <div class="row3"></div>
        <div class="row3 hotel">
            <a href="#">海外酒店</a>
            <a href="#">特价酒店</a>
        </div>
        <div class="row3 hotel">
            <a href="#">团购</a>
            <a href="#">民宿客栈</a>
        </div>
    </div>
    <div class="row">
        <div class="row3"></div>
        <div class="row3 hotel">
            <a href="#">海外酒店</a>
            <a href="#">特价酒店</a>
        </div>
        <div class="row3 hotel">
            <a href="#">团购</a>
            <a href="#">民宿客栈</a>
        </div>
    </div>

    <div class="row">
        <div class="row3 hotel">
            <a href="#">海外酒店</a>
            <a href="#">特价酒店</a>
        </div>
        <div class="row3 hotel">
            <a href="#">海外酒店</a>
            <a href="#">特价酒店</a>
        </div>
        <div class="row3 hotel">
            <a href="#">团购</a>
            <a href="#">民宿客栈</a>
        </div>
    </div>
</nav>
</body>
</html>
image.png

3、justify-content调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐
下面这几个值都是给父级添加的。

值 描述 白话文
flex-start 默认值。项目位于容器的开头。 让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序但是盒子顺序不变
center 项目位于容器的中心。 让子元素在父容器中间显示
space-between 项目位于各行之间留有空白的容器内。 左右的盒子贴近父盒子，中间的平均分布空白间距
space-around 项目位于各行之前、之间、之后都留有空白的容器内。 相当于给每个盒子添加了左右margin外边距 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            width: 1000px;
            height: 300px;
            border: 2px solid lightcoral;
            margin: 100px auto;
            display: flex;
            /*justify-content: flex-start;让子元素从父元素的开头开始显示，这里一共三个盒子，装不满父盒子的尺寸。*/
            /*justify-content: flex-end;让子元素从父元素的结尾处开始显示，但是盒子的顺序不变，最后一个子盒子贴着父元素的最后面显示。这里一共三个盒子，装不满父盒子的尺寸。*/
            /*justify-content: center;让子元素在父元素中  居中显示，剩下的尺寸自动分配给前后占不满的地方，父盒子的左右就空出来了，中间显示子盒子*/
            /*justify-content: space-between;子元素平均装进父盒子，剩下装不满的空白平均分布给子盒子，并且子盒子的最左边和最右边没有空白，相当于在子盒子之间自动加了间距*/
            justify-content: space-around; /*将子盒子装不满的剩下部分平局分配给每个子盒子，用空隙包裹子元素，而且是每个子元素左右边都有，空白部分会环绕子盒子左右*/
        }
        div {
            width: 250px;
            height: 100%;
        }
        div:first-child {
            background-color: #ccc;
        }
        div:nth-child(2) {
            background-color: salmon;
        }
        div:nth-child(3) {
            background-color: mediumseagreen;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>

justify-content: flex-start;

image.png

justify-content: flex-end;

image.png

justify-content: center;

image.png

justify-content: space-between;

image.png

justify-content: space-around;

image.png

4、align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

值 描述 白话文
stretch 默认值。项目被拉伸以适应容器。 让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center 项目位于容器的中心。 垂直居中
flex-start 项目位于容器的开头。 垂直对齐开始位置 上对齐
flex-end 项目位于容器的结尾。 垂直对齐结束位置 底对齐 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            width: 1000px;
            height: 600px;
            border: 2px solid lightcoral;
            margin: 100px auto;
            display: flex;

            /*-------------------------------------------------------------------------------*/
            /*水平对齐*/

            /*justify-content: flex-start;让子元素从父元素的开头开始显示，这里一共三个盒子，装不满父盒子的尺寸。*/
            /*justify-content: flex-end;让子元素从父元素的结尾处开始显示，但是盒子的顺序不变，最后一个子盒子贴着父元素的最后面显示。这里一共三个盒子，装不满父盒子的尺寸。*/
            /*justify-content: center;让子元素在父元素中  居中显示，剩下的尺寸自动分配给前后占不满的地方，父盒子的左右就空出来了，中间显示子盒子*/
            /*justify-content: space-between;子元素平均装进父盒子，剩下装不满的空白平均分布给子盒子，并且子盒子的最左边和最右边没有空白，相当于在子盒子之间自动加了间距*/
           justify-content: space-around;  /*将子盒子装不满的剩下部分平局分配给每个子盒子，用空隙包裹子元素，而且是每个子元素左右边都有，空白部分会环绕子盒子左右*/

            /*----------------------------------------------------------------------------*/
            /*垂直对齐*/

            /*align-items: flex-start;  对齐开始位置，相当于上对齐*/
            /*align-items: flex-end; 对齐结束位置，相当于底对齐*/
            /*align-items: center; 垂直居中对齐*/
            align-items: stretch; /*拉伸  类似height: 100%； 而且是随着父盒子的高度自由拉伸 如果子盒子不给高度的情况下，子盒子将会被拉伸以适应父盒子尺寸*/
            /*-------------------------------------------------------------------------------*/
        }
        div {
            width: 250px;
            /*height: 200px;*/
        }
        div:first-child {
            background-color: #ccc;
        }
        div:nth-child(2) {
            background-color: salmon;
        }
        div:nth-child(3) {
            background-color: mediumseagreen;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>

align-items: flex-start;上对齐

image.png

align-items: flex-end;底对齐

image.png

align-items: center;垂直居中对齐

image.png

align-items: stretch; 类似height: 100%； 如果子盒子不给高度的情况下，子盒子将会被拉伸以适应父盒子尺寸 而且是随着父盒子的高度自由拉伸

image.png

5、flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值 描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

根据需要设置，一般前两个用的多一些。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            width: 1000px;
            height: 600px;
            border: 2px solid lightcoral;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            align-items: stretch;
            flex-wrap: nowrap;/*默认值，不拆行，不拆列，尺寸不够就压缩显示，强制子盒子在父盒子内一行显示*/
            /*flex-wrap: wrap;尺寸不够就换行显示，这里之所以第5个盒子会居中显示，是因为前面加了` justify-content: space-around;`属性，子盒子装不满父盒子，空白部分就平局分开环绕子盒子。*/
            /*flex-wrap: wrap-reverse;  翻转显示*/
        }
        div {
            width: 250px;
            height: 200px;
        }
        div:first-child {
            background-color: #ccc;
        }
        div:nth-child(2) {
            background-color: salmon;
        }
        div:nth-child(3) {
            background-color: mediumseagreen;
        }
        div:nth-child(4) {
            background-color: coral;
        }
        div:nth-child(5) {
            background-color: #ff697a;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>
</html>

flex-wrap: nowrap;强制一行内显示，尺寸不够就压缩显示，不换行

image.png

flex-wrap: wrap;尺寸不够就换行显示，这里之所以第5个盒子会居中显示，是因为前面加了justify-content: space-around;属性，子盒子装不满父盒子，空白部分就平局分开环绕子盒子。

image.png

flex-wrap: wrap-reverse;反向显示，用的很少

image.png

6、flex-flow是flex-direction(水平还是垂直显示)、flex-wrap（一行还是多行显示）的简写形式

flex-flow: flex-direction flex-wrap;

白话记： flex-flow: 排列方向 换不换行;

两个中间用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话/
flex-flow: column wrap; / 两者的综合 */

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        section {
        width: 1000px;
        height: 600px;
        border: 2px solid pink;
        margin: 100px auto;
        display: flex;
        /* flex-direction: row;水平显示
        flex-wrap: wrap;是否换行    这两句话等价于下面的这句话*/
        flex-flow: column wrap;  /* 两者的综合 垂直显示 换行*/
        }
        div {
            width: 250px;
            height: 200px;

        }
        div:first-child {
            background-color: pink;
        }
        div:nth-child(2) {
            background-color: purple;
        }
        div:nth-child(3) {
            background-color: skyblue;
        }
        div:nth-child(4) {
            background-color: hotpink;
        }
        div:nth-child(5) {
            background-color: deeppink;
        }
        </style>
    </head>
    <body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
    </body>
</html>
image.png

7、align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值 描述 测试
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        section {
        width: 1000px;
        height: 600px;
        border: 2px solid pink;
        margin: 100px auto;
        display: flex;
        flex-flow: row wrap;  /* 水平还是垂直，是否换行  这句话必须有 否则下面的不起效果 */
        align-content: space-around;/*让多行垂直居中*/
        }
        div {
            width: 250px;
            height: 200px;

        }
        div:first-child {
            background-color: pink;
        }
        div:nth-child(2) {
            background-color: purple;
        }
        div:nth-child(3) {
            background-color: skyblue;
        }
        div:nth-child(4) {
            background-color: hotpink;
        }
        div:nth-child(5) {
            background-color: deeppink;
        }
        div:nth-child(6) {
            background-color: #f40;
        }
        div:nth-child(7) {
            background-color: #daa520;
        }
        </style>
    </head>
    <body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </section>
    </body>
</html>

align-content: space-around;

image.png

8、order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。 用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

order: 1;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        section {
        width: 1000px;
        height: 600px;
        border: 2px solid pink;
        margin: 100px auto;
        display: flex;
        flex-flow: row wrap;  /* 这句话必须有 否则下面的不起效果 */
        align-content: space-around;
        }
        div {
            width: 250px;
            height: 200px;

        }
        div:first-child {
            background-color: pink;

        }
        div:nth-child(2) {
            background-color: purple;
            order: 1; /*z只要等于一，这个盒子就会被放到最后一个位置上去*/
        }
        div:nth-child(3) {
            background-color: skyblue;
        }
        div:nth-child(4) {
            background-color: hotpink;
            order: -1;/* 数值越小，越往前  可是负数*/
        }
        div:nth-child(5) {
            background-color: deeppink;
        }
        div:nth-child(6) {
            background-color: #f40;
            order: -2;
        }
        div:nth-child(7) {
            background-color: #daa520;
        }
        </style>
    </head>
    <body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </section>
    </body>
</html>

调整盒子的位置：

image.png

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

相关文章

  • 第10章 布局样式相关-伸缩布局（Flexible Box）

    伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box）...

  • CSS3之Flexbox布局在ReactNative的应用

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，被成为弹性布局（或者伸缩布局）。相比...

  • CSS3伸缩布局

    CSS3伸缩布局 CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十...

  • flex伸缩布局

    CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box） Flexbox...

  • 学习CSS3伸缩布局盒模型Flex布局

    一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexibl...

  • flex布局那些事儿

    什么是FLEX CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒（Flexible Box）模型...

  • css3伸缩布局

    伸缩布局(CSS3) CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，...

  • 入坑 React Native 之FlexBox布局

    FlexBox布局也叫弹性盒子,弹性布局.是CSS3为我们提供了一种可伸缩的灵活的页面布局方式-flexbox布局...

  • CSS3 伸缩布局

    CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更...

  • css3 伸缩布局

    伸缩布局 设置父元素为伸缩盒子, (直接父元素) 为什么伸缩盒子子元素在一行上显示?子元素是按照伸缩盒子主轴方向显...

网友评论

      本文标题：伸缩布局（css3）

      本文链接：https://www.haomeiwen.com/subject/snmvtctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|伸缩布局（css3）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！