目前纯文字描述，后期补上图片说明

概念

• 主轴：main-axis，默认横向的轴
• 交叉轴：cross-axis，默认纵向的轴，有的称为侧轴，与主轴 90°中心旋转交叉

弹性布局的结构

<div class="flex-container"><!-- 容器 -->
    <div class="flex-item">1</div><!-- 项目 -->
    <div class="flex-item">1</div><!-- 项目 -->
</div>

容器 css

.flex-container{
    /* 主轴方向：row 行（横向）| row-reverse 反向行 | column 列（纵向）| column-reverse 反向列 */
    flex-direction: row;
    /* 换行：nowrap 不换行 | wrap 换行 | wrap-reverse 反向换行（往上换行）*/
    flex-wrap: nowrap;
    /* 以上两者的简写 */
    /*flex-flow: <flex-direction> || <flex-wrap>;*/
 
    /*
        主轴的对齐方式：flex-start 主轴起点对齐（横向是左对齐，纵向是上对齐）flex-end 主轴终点对齐
        center 主轴中点对齐
        space-between 两端对齐
        space-around 两端对齐，每个项目两侧的间隔相等并向中间靠拢
      */
    justify-content: flex-start;
    /*
        交叉轴的对齐方式：flex-start | flex-end | center
        baseline 项目的第一行文字的基线对齐
        stretch 拉长，如果项目未设置高度或设为 auto，将占满整个容器的高度
    */
    align-items: stretch;
    /*
        多根轴线时交叉轴对齐方式（换行时可产生多根轴线，不换行只有一根轴线此值无效）：flex-start | flex-end | center
        space-between 两端对齐
        space-around 两端对齐，每个轴线两侧的间隔相等向中间靠拢
        stretch 拉长，所有轴线占满整个容器
    */
    align-content: stretch;
}

项目 css

.flex-item{
  /* 排列顺序：数值越小，排列越靠前，默认为 0 */
  order: 0;
  /* 放大比例，与有设置该值的项按比例放大并占满空间，默认为 0 即如果存在剩余空间，也不放大 */
  flex-grow: 0;
  /* 缩小比例，项目在主轴总宽度超出 100% 对当前项按比例缩小，默认为 1 即如果空间不足，该项目将缩小。*/
  flex-shrink: 1;
  /*
    起始值，分配多余空间前的初始长度（主轴横向时是宽度）【width/height 可用的长度值，如 1px/1em/1rem/auto/30% 等】浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。*/
  flex-basis: auto;
  /* 以上三者的简写 */
  /*flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];*/
  /*
    语法糖解析：//none 快捷键
    flex:none = flex:0 0 auto
    
    // 数字 (grow,shrink=1,basis=0)
    flex:2 = flex:2 1 0
    
    // 数字，数字 (grow,shrink,basis=0)
    flex:2 3 = flex:2 3 0
    
    // 非数字 (grow=1,shrink=1,basis)
    flex:30px = flex:1 1 30px
    flex:30% = flex:1 1 30%
    flex:auto = flex:1 1 auto
    
    // 数字，非数字 (grow,shrink=1,basis)
    flex:2 30px = flex:2 1 30px
    flex:2 30% = flex:2 1 30%
    flex:2 auto = flex:2 1 auto
    
    // 数字，数字，非数字 (grow,shrink,basis)
    flex:2 3 30px
    flex:2 3 30%
    flex:2 3 auto
  */
 
  /*
    自身对齐方式：auto | flex-start | flex-end | center | baseline | stretch
    默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
  */
  align-self: auto;
}