弹性盒子

弹性盒子

垂直居中：

• 传统：绝对定位。
• flex：flexible box（弹性盒子）。可以轻松控制元素的排列，对齐和顺序。
  
  

定义

使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。

【注】一般是使用display:flex；display：inline-flex极少用。
display：fle:如果没有为父元素设置宽，默认为100%；
display：inline-flex：如果没有设置宽，，默认为所有子元素的宽的和。
eg:

属性

flex-direction

用于设置盒子中的子元素的排列方向。

取值：

• row 从左到右水平排列子元素（默认值）
• column 从上往下垂直排列子元素
• row-reverse 从右到左水平排列子元素
• column-reverse 从下往上垂直排列子元素
  eg:

flex-wrap

规定flex容器是单行还是多行，是否换行
取值：

• nowrap:不换行（默认值）
• wrap：换行
• wrap-reverse 反向换行。
  eg:
  

flex-flow

flex-flow是flex-direction与flex-wrap的组合写法。（复合属性）
flex-flow:flex-direction flex-wrap；
eg:

弹性盒子与弹性元素

• 弹性盒子：指的是使用display：flex或display：inline-flex声明的容器。
• 弹性元素：指的是弹性盒子中的子元素。

弹性元素：

• 不要再去设置float。
• 设置完绝对定位后，该元素就不再是弹性元素了，不参与弹性布局。
• 弹性元素均为块级元素。

主轴与侧轴（交叉轴）

• 主轴方向：为子元素排列的方向。可以通过flex-direction改变。
• 侧轴方向：与主轴方向垂直，为子元素的换行方向。可以通过flex-wrap改变。

justify-content

用于控制弹性元素在主轴上的排列方式。

• flex-start 元素紧靠主轴的起点（默认值）
• flex-end 元素紧靠主轴的终点。
• center 元素在主轴上居中。
• space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
• space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
• space-evenly 元素间距平均分配
  eg:
  

align-items

用于控制弹性元素在侧轴上的排列方式。

多行单行都适用的属性。

• flex-start 从侧轴开始的地方对齐
• flex-end 从侧轴结束的地方对齐
• center 中间对齐
• stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

align-content

用于控制弹性元素在侧轴上的排列方式。
只适用于多行显示的弹性容器。

• stretch 拉伸
• flex-start 元素紧靠行的起点
• flex-end 元素紧靠行的终点
• center 元素在行中居中
• space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
• space-around 元素在侧轴方向上的间隔相等。
• space-evenly 元素间距离平均分配

            align-content: stretch;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;

align-self

用于控制单个元素在侧轴上的排列方式。

• stretch 拉伸
• flex-start 元素紧靠行的起点
• flex-end 元素紧靠行的终点
• center 元素在行中居中

            align-self: stretch;
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;

flex-grow

用于将弹性盒子的可用空间，按照比例分配给弹性元素。

        .father {
            width: 400px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid red;
            display: flex;
            flex-flow: row wrap;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            flex-grow: 1;
        }

    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>

flex-shrink

在弹性盒子装不下子元素时，对子元素缩小的比例设置。

1.计算缺少的值。

2.当前元素应该缩小比例：
802/(1001+802+1001)=44.4%

3.应该缩小的值：缺少的值缩小的比例=8044.4%=35.6px

4.最终尺寸：缺少的值-应该缩小的值 80-35.6=44.4px；

flex-basis

大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。

        .son{
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
        .son:nth-child(2){
            
            width: 100px;
            background-color: cadetblue;            
            flex-grow:2;
            flex-shrink:1;
            flex-basis:80px;
            order: -2;
        }

order

用于控制弹性元素的位置。默认为0，数值越小越靠前。

        .son:nth-child(2){
            
            width: 100px;
            background-color: cadetblue;            
            flex-grow:2;
            flex-shrink:1;
            flex-basis:80px;
            order: -2;
        }

flex复合写法

flex：flex-grow flew-shrink flex-basis

        .son:nth-child(2) {
            width: 100px;
            background-color: cadetblue;
            flex: 2 1 80px;
            order: -2;
        }

【注】

1.文本节点也可以被弹性布局操作。
2.绝对定位的元素不参与弹性布局。