也叫伸缩盒
弹性盒是一个简单而强大的布局方式，我们通过弹性盒指明空间的分布方式，内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中，通过弹性盒内容可以轻易的横向或纵向排列
在弹性容器中，各元素在主轴上排列，主轴可以使横向的，也可以是纵向的

弹性盒是css3中新增的一种布局方式
通过弹性盒可以使一个盒子自动适应其容器的大小
通过弹性盒可以创造出非常灵活的布局

弹性容器

弹性元素就是弹性容器，要使用弹性盒，必须先将元素设置弹性容器

设置弹性容器

有两种方式

display:flex

块级弹性容器
所有子元素都变为弹性容器

display:inline-flex

行内弹性容器

弹性元素

弹性项，弹性子元素
弹性容器中的子元素是弹性元素，不是后代元素
一个元素既可以是弹性容器，也可以是弹性子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            height: 300px;
            border: 2px solid red;
            /* 设置弹性盒 */
            display: flex;
            justify-content: space-around;
        }
        li{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        li:nth-child(1){
            background-color: goldenrod;
        }
        li:nth-child(2){
            background-color: red;
        }
        li:nth-child(3){
            background-color: rosybrown;
        }
        li:nth-child(4){
            background-color: royalblue;
        }
        li:nth-child(5){
            background-color: yellowgreen;
        }
        li:nth-child(6){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

弹性容器的属性

flex简写属性

可以同时设置三个值

flex:flex-grow flex-shrink flex-basis;

initial —> 0 1 auto
auto —> 1 1 auto
none —> 0 0 auto

每一个元素缩减多少，由元素的flex-basis，flex-shrink共同决定
第一个元素flex-basis flex-shrink + 第二个元素flex-basis flex-shrink

flex-direction

用来设置弹性容器的主轴的方向

row - 主轴是横向的，自左向右
row-reverse - 主轴是横向的，自右向左
column - 主轴是纵向的，自上向下
column-reverse - 主轴是纵向的，自下向上

flex-wrap
用于指定弹性盒子的子元素换行方式
弹性元素在主轴上是否换行
nowrap - 默认，弹性容器为单行，该情况下弹性子项可能会溢出容器
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列

justify-content

元素在主轴上的对齐方式

flex-start	主轴起边
flex-end	主轴终边弹性项目向行尾紧挨着填充
center	主轴的中间弹性项目居中紧挨着填充
space-between	将空白区域平均分配到弹性元素间弹性项目平均分布在该行上
space-around	将空白区域平均分布到四周
space-evenly	将空白空间设置到元素的一侧能确保元素之间的距离是相等的
strech	拉伸使元素充满盒子

align-items

垂轴、辅轴、侧轴的对齐方式

center	侧轴的中间
flex-start	侧轴起边
flex-end	侧轴终边
stretch	拉伸撑满侧轴
baseline

align-self

垂轴、辅轴、侧轴的对齐方式

align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式
注意：align-self属性可重写灵活容器的align-items属性，用于覆盖元素上的align-items属性

stretch
center
start
end

order

用来指定弹性元素的排列顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            display: flex;
        }
        li:nth-child(1){
            width: 100px;
            height: 100px;
            background-color: #bfa;
            order: 3;
        }
        li:nth-child(2){
            width: 100px;
            height: 100px;
            background-color: orange;
            order: 1;
        }
        li:nth-child(3){
            width: 100px;
            height: 100px;
            background-color: yellow;
            order: 2;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

flex-flow

简写属性，可以同时设置flex-direction和flex-wrap

flex-flow: column wrap;

align-content

用来设置辅轴上空白的分布方式

flex-start	元素沿着辅轴起边对齐
flex-end	元素沿着辅轴终边对齐> 同justify-content

flex-grow

用来指定元素的增长的系数
按照数值大小的比例来分配
类比弹簧，最长能伸多长

当父元素中有空白空间时
需要使用增长的系统，来分配每一个元素的增长的大小（按比例）

flex-basis

指定弹性元素的标准大小
这个元素一旦设置了数字则width（主轴是横轴）自动失效，主轴是纵轴则height失效

flex-basis:100px;

flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则
当子元素的总宽度超过父元素时，需要使用缩短系数分配每一个元素的缩减的大小
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

CSS

flex （弹性盒）