伸缩布局flex

一、伸缩布局的起源

　　1、之前我们想要适应不同的浏览器，一般采用的是设置宽度、高度为父级元素的百分比，但是有时候百分比的计算是相当复杂的，加上有时候还有规定的宽度要设置，所以，伸缩布局的出现是我们所急需的。

　　例：将一个section三等分，其中放入3个div

<!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>伸缩布局</title>

    <style>

        /* 原始的模式 */

        /* section{

        width: 1000px;

        height: 200px;

    }

    div{

        float:left;

        width:33.33%;

        height:20px;

        background-color: red;;

    }

    div:nth-child(2){

        background-color: blue;

    }

    div:last-child{

        background-color:green;

    } */

        /* 采用伸缩布局 */

        section {

            display: flex;

            width: 1000px;

        }

        div {

            flex: 1;

            height: 20px;

            background-color: red;

        }

        div:nth-child(2) {

            background-color: blue;

        }

        div:last-child {

            background-color: green;

        }

    </style>

</head>

<body>

    <section>

        <div></div>

        <div></div>

        <div></div>

    </section>

</body>

</html>

二、伸缩布局的使用

　　1、可以添加具体宽度

div:nth-child(2) {

            width: 20px;

            background-color: blue;

        }

　　2、可以设置最小宽度，这样当屏幕缩小到小于最小宽度时，就会出现滚动条

　　min-width:500px;

　　3、伸缩布局的排列方式：主轴、方向

  flex-direction: row;

            /* 默认的：横向排列 */

            flex-direction: column;

            /* 纵向排列 */

            flex-direction: row-reverse;

            /* 横向逆序 */

            flex-direction: column-reverse;

            /* 纵向逆序 */

　　4、主轴的对齐方式

 /* justify-content一行的情况 */

            /* 从左到右，默认的顺序 */

            /* justify-content: flex-start; */

            /* 从右到左的，逆序 */

            /* justify-content: flex-end; */

            /* 子元素在父元素的中间显示 */

            /* justify-content: center; */

            /* 均分，贴边 */

            /* justify-content: space-around; */

            /* 均分，不贴边 */

            /* justify-content: space-between; */

/* 纵向逆序 */

/* align-content 多行的情况（）

值同，默认是strentch

必须在父元素例配置{display:flex;flex-direction:row;flex-wrap:wrap;}

　　5、order:控制子元素的裴烈顺序：默认是0，越小的值越排在前面,可以是负数

　　6、flex-wrap是否换行：no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行

　　7、aligin-items侧主轴的对齐方式：stretch;子元素高度拉伸（默认）center;居中felx-start;在开头；flex-end;在底边

　　8、flex-flow:排列方向是否换行的综合接卸形式

巴特西

伸缩布局flex

最新文章

热门文章