CSS_flex 布局之弹性盒-蒲公英云

菜鸟教程参考

一、flex(弹性盒、伸缩盒)

flex(弹性盒、伸缩盒)
    -是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
    -flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 
    -弹性容器
        -要使用弹性盒，必须先将一个元素 设置为弹性容器
        -我们通过display 来设置弹性容器
            -display:flex设置 为块级弹性容器
            -display:inline-flex设置为行内的弹性容器
    -弹性元素
        -弹性容器的子元素（不是后代元素）是弹性元素(弹性项)
        -弹性元素可以同时是弹性容器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            width: 800px;
            border: 10px red solid;
            /*将ul设置为弹性容器*/
            display: flex;
            flex-direction: row;
            /* 
            flex-direction指定容器中弹性元素的主轴排列方式
            可选值:
                row默认值，弹性元素在容器中水平排列(左向右):主轴自左向右
                row-reverse弹性元素在容器中反向水平排列(右向左):主轴自右向左
                column弹性元素纵向排列(自上向下)
                column-reverse弹性元素方向纵向排列(自下向上)
            主轴:
                弹性元素的排列方向称为主轴
            侧轴
                与主轴垂直方向的称为侧轴*/
        }
        li {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /*
            弹性元素的属性:
            flex-grow指定弹性元素的伸展的系数
                -当父元素有多余空间的时，子元素如何伸展
                -父元素的剩余空间，会按照比例进行分配
            flex-shrink指定弹性元素的收缩系数
                -当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
                1收缩
                0不收缩
            */
            /* flex-grow: 1; 多余空间按比例分配1份*/
            flex-shrink: 1;/* 按比例收缩1份 */
        }
        li:nth-child(2) {
            background-color: pink;
            /* flex-grow: 2; 多余空间按比例分配2份*/
            /*flex-shrink: 2; 按比例收缩2份 */
        }
        li:nth-child(3) {
            background-color: orange;
            /* flex-grow: 3; 多余空间按比例分配3份*/
            /*flex-shrink: 3; 按比例收缩3份 */
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

在这里插入图片描述

二、弹性`容器`的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            width: 800px;
            border: 10px red solid;
            /*设置u1为弹性容器*/
            display: flex;
            /* flex-direction: column; 
            1、flex-wrap:
                设置弹性元素是否在弹性容器中自动换行
                可选值:
                    nowrap默认值，元素不会自动换行
                    wrap元素沿着辅轴方向自动换行
                    wrap-reverse元素沿着辅轴反方向换行
               flex-wrap: wrap-reverse;
            2、flex-flow: 可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow
            flex-flow: row wrap;  
            3、justify-content如何分配主轴上的空白空间(主轴上的元素如何排列)
            可选值:
                flex-start元素沿着主轴起边排列 
                flex-end元素沿着主轴终边排列
                center元素居中排列
                space-between空白均匀分布到元素间
                space-around空白分布到元素两侧
                space-evenly空白分布到元素的单侧
            */
            justify-content: center;
        }
        li {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
        }
        li:nth-child(2) {
            background-color: pink;
        }
        li:nth-child(3) {
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            width: 600px;
            height: 800px;
            border: 10px red solid;
            /*设置u1为弹性容器*/
            display: flex;
            flex-flow: row wrap;
            /*
            align-items:
            -元素在辅轴上如何对齐
            -元素间的关系
                -可选值:
                    stretch默认值，将元素的长度设置为相同的值
                    flex-start元素不会拉伸，沿着辅轴起边对齐
                    flex-end沿着辅轴的终边对齐
                    center居中对齐
                    baseline基线对齐
             */
            align-items: center;
            /* align-content:辅轴空白空间的分布*/
            align-content: space-between;
        }
        li {
            width: 200px;
            /* height: 100px; */
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
        }
        li:nth-child(1) {
            /* align-self:用来覆盖当前弹性元素上的align-items */
            align-items: stretch;
        }
        li:nth-child(2) {
            background-color: pink;
        }
        li:nth-child(3) {
            background-color: orange;
        }
        li:nth-child(4) {
            background-color: rgb(50, 37, 223);
        }
        li:nth-child(5) {
            background-color: rgb(58, 230, 36);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        <li>3
            <div>3</div>
        </li>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

三、弹性`元素`的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            width: 400px;
            border: 10px red solid;
            /*设置u1为弹性容器*/
            display: flex;
        }
        li {
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /*弹性的增长系数*/
            /* flex-grow: 1; */
            /*
            弹性元素的缩减系数
                缩减系数的计算方式比较复杂
                缩诚多少是根据缩诚系数和元素大小来计算
            */
            /* flex-shrink: 1; */
            /*元素基础长度
            flex-basis指定的是元素在主轴上的基础长度
            如果主轴是横向的则该值指定的就是元素的宽度
            如果主轴是纵向的则该值指定的是就是元素的高度
            默认值是auto，
            表示参考元素自身的高度或宽度
            如果传递了一个具体的数值，则以该值为准
            */
            /* flex-basis: auto; */
            /*
            flex 
            可以设置弹性元素所有的三个样式
            flex 增长 缩减 基础;
            initial "flex: 0 1 auto".
            auto "flex: 1 1 auto"
            none "flex: 0 0 auto" 弹性元素没有弹性
            */
            flex: initial;
        }
        li:nth-child(1) {
            /* order 决定弹性元素的排列顺序， */
            order: 2;
        }
        li:nth-child(2) {
            background-color: pink;
            order: 3;
        }
        li:nth-child(3) {
            background-color: orange;
            order: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>