弹性布局 - 手册(自整理)

因为弹性布局所涉及到的一些命令比较多，这里主要记录一些弹性布局的命令。以便以后查阅方便。

1. 弹性盒子

• 声明定义 display

  值	描述
  flex	将对象作为弹性伸缩盒显示(父元素宽度若不指定，默认会100%)
  inline-flex	将对象作为内联块级弹性伸缩盒显示(父元素宽度若不指定，默认被子元素撑起来，不一定是100%)

• 盒子元素排列方向 flex-derection

  表头	表头
  row	从左到右水平排列 (盒子元素排列方向默认值)
  row-reverse	从右到左水平排列
  column	从上到下垂直排列
  column-reverse	从下到上垂直排列

• 排列方向上是否折行 flex-wrap

  值	描述
  nowrap	没有折行 (默认)
  wrap	当元素超出边界的时候，折行
  wrap-reverse	当元素超出边界的时候，反向折行

  没有折行 折行 反向折行

• 合并写法 flex-flow: flex-direction flex-wrap

• 轴介绍，轴不显示在页面上，但确实是存在的，我们使用箭头代替它

  
  row方向时的轴示意
  column方向的轴示意

• 元素在主轴上的排列方式 justify-content

  值	描述
  flex-start	元素紧靠主轴的起点
  flex-end	元素紧靠主轴的终点
  center	元素从主轴的中心点开始
  space-between	第一个元素紧靠起点，最后一个元素紧靠重点，其余元素的留白平均分配剩余留白空间 (每一行作为一个单位)
  space-around	每两个元素之间的间隔(各自相等)为元素和边框的间隔两倍 (每一行作为一个单位)
  space-evenly	所有间隔均一致 (每一行作为一个单位)

  flex-start
  flex-end
  center
  space-between
  space-around
  space-evently

  • 元素在交叉轴上的排列方式 align-items (交叉轴上的所有元素)

    值	描述
    stretch	将交叉轴空间平均分配给元素(拉伸) (默认)
    flex-start	元素紧靠交叉轴的起点
    flex-end	元素紧靠交叉轴的终点
    center	元素从交叉轴的中心点开始

    stretch
    flex-start
    flex-end
    center
    • 如果设置了width | height | min-height | min-width | max-width | max-height，将影响stretch 的结果，因为 stretch 优先级低于宽高设置(这里取消了第一个item的高度，设为了auto)。

  • 元素在交叉轴上有空余，align-content分配策略

    值	描述
    stretch	将交叉轴空间平均分配给元素(拉伸)(默认)
    flex-start	元素紧靠交叉轴的起点
    flex-end	元素紧靠交叉轴的终点
    center	元素从交叉轴的中心点开始
    space-between	第一列元素紧贴交叉轴起点，最后一列元素紧贴交叉轴终点，其余列的留白平均分配剩余留白空间
    space-around	元素从交叉轴的中心点开始
    space-evenly	元素从交叉轴的中心点开始

    stretch
    flex-start
    flex-end
    center
    space-between
    space-around
    space-evently

2. 弹性元素

• 单个元素在交叉轴的排列 align-self (交叉轴上的单个元素)

  值	描述
  stretch	将交叉轴空间平均分配给元素(拉伸) (默认)
  flex-start	元素紧靠交叉轴的起点
  flex-end	元素紧靠交叉轴的终点
  center	元素从交叉轴的中心点开始

  stretch
  flex-start
  flex-end
  center

• 放大属性 flex-grow
  

  元素没有宽度时，直接用 ( 父级宽度 / 所有flex-grow的和 ) * 单个flex-grow
  某些元素有宽度时，用 ( ( 父级宽度 - 有宽度的所有宽度和 ) / 所有flex-grow的和 ) * 单个flex-grow + 对应的宽度

• 缩小属性 flex-shrink，与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。
  

  缩小后的效果

      .my-flex{
          border: 1px solid red;
          height: 300px;
          width: 200px;
          display: flex;
          box-sizing: content-box;
      }
      .my-flex div{
          height: auto;
      }
      .my-flex div{
          width: 60px;
          background-color: rgba(100,100,100,0.2);
          box-sizing: border-box;
          background-clip: content-box;
          text-align: center;
          line-height: 37px;
      }
      .my-flex div:nth-child(1){
          flex-shrink: 0;
      }
      .my-flex div:nth-child(2){
          flex-shrink: 0;
          background-color: rgba(100,100,100,0.4);
      }
      .my-flex div:nth-child(3){
          background-color: rgba(100,100,100,0.6);
          flex-shrink: 1;
      }
      .my-flex div:nth-child(4){
          background-color: rgba(100,100,100,0.8);
          flex-shrink: 3;
      }
  

计算公式：
我们可以看到父容器宽度为200，子项定义为60，子项相加后为240，超出40，那么超出的40需要被块3和块4消化，通过加权综合可得：40 x 1 + 40 x 3=160
第三个块缩小大小：(40 x 1) / 160 * 40 = 10 即最后大小为60 - 10 = 50
第四个块缩小大小：(40 x 3) / 160 * 40 = 30 即最后大小为60 - 30 = 30

• 元素的初始宽度 flex-basis

用于设置某个弹性盒元素的初始长度，可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性。

• 元素的组合写法 flex

flex是flex-grow、flex-shrink 、flex-basis缩写组合。
建议使用 flex 面不要单独使用 flex-grow / flew-shrink / flex-basis 。

• 元素的组合写法 order

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。

• 自动空间 margin-right:auto

  margin-right自动撑开