基本概念

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性
• 器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
• 基本语法

    display:flex;

flex 容器属性 （主）

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-directions

决定主轴的方向，子盒子在容器的排列方向

flex-direction: row | row-reverse | column | column-reverse

• row：默认值，主轴为水平方向，起点在左边（从左往右排列）

• column：主轴为垂直方向，起点在上边（从上往下排列）

• row-reverse：主轴为水平方向，起点在右边（从右往左排列）

• column-reverse：主轴为垂直方向，起点在下面（从下往上排列）

flex-wrap

flex-wrap 决定在一条轴上面排不下时是否换行，如何换行

    flex-wrap： nowrap | wrap | wrap-reverse 

• nowrap: 默认值，默认不换行，在一条轴上面排不下时不换行会导致容器内盒子的宽度失效
  • 下图每个设置宽度设置为 100px，没有换行导致宽度失效，此时子盒子宽度根据容器宽度平均分配

• wrap：换行，第一行在上方

• wrap-reverse：换行，第一行在下方

flex-flow

• flex-direction 和 flex-wrap 组合（简写）

    flex-flow：column wrap;
    // 第一个值 flex-direction 属性，第二个值 flex-wrap 属性

justify-content

• 决定在主轴上面的对齐方式（排列方式）

    justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start:默认值，主轴上面左对齐

• flex-end:主轴上右对齐

• center：主轴上居中

• space-between：俩端对齐，盒子之间间隔相等

• space-around：盒子之间间隔相等，相邻的盒子之间的间隔与是容器的俩倍

aling-items

• 决定在副轴（交叉轴）上排列方式

    aling-items：flex-start | flex-end | center | baseline | strech

• flex-start：默认值，副轴上起点对齐（上对齐）

• flex-end：副轴上终点对齐（下对齐）

• center：副轴上居中对齐

• baseline：一项目中的文字果没有文字则在底部对齐

• stretch：如果容器内盒子没有设置高度或设为 auto，子盒子会占满容器高度

align-content

• 定义多跟轴线的对齐方式，如果只有一个根轴线则不生效(需使用 flex-flow 设置主轴和换行方式，个人理解）
• 只针对 flex-flow：row wrap 添加图文

    flex-flow:row wrap | row wrap-reverse | column-wrap | column wrap-reverse
    align-content: flex-start | flex-end | center | space-between | space-around | stretch

• flex-start

  • row wrap

    

  • row wrap-reverse

    

  • column warp

  • column wrap-reverse

    

• flex-end

  • row wrap

    

  • row wrap-reverse

    

  • column wrap

    

  • column wrap-reverse

    

• center

  • row wrap

    

  • row wrap-reverse

    

  • column wrap

    

  • column wrap-reverse

    

• space-between

  • row wrap

    

  • row wrap-reverse

    

  • column wrap

    

  • column wrap-reverse

    

• space-around

  • row wrap

    

  • row wrap-reverse

    

  • column wrap

    

  • column wrap-reverse

    

• stretch
  • 子盒子没有设置高度时，flex-direction：row | row-reverse 时，会填充高度