Flex弹性布局

Flex弹性布局笔记

• flex-direction:文本排列方向

  1. row：默认值，水平排列，从左侧开始排序
  2. row-reverse:水平排序，从右侧开始排序
  3. column:垂直排序，从上到下进行排序
  4. column-reverse:垂直排序，从下到上进行排序

• flex-wrap：文本是否换行排序

  1. nowrap:默认，不换行
  2. wrap：换行，进行多行排列
  3. wrap-reverse:换行，第一行在最下方

• align-content：多行排列时使用对齐，如果只有单行该属性不生效

  1. stretch：默认值，轴线占满整个交叉轴。
  2. center：居中，与交叉轴中点对齐
  3. flex-start ：左侧开始排序，与交叉点的起点对齐
  4. flex-end: 右侧开始排序，与交叉点的终点对齐
  5. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  6. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• justify-content：根据主轴进行对齐

  1. flex-start ：默认值，左侧开始排序进行对齐，
  2. center：居中
  3. flex-end: 右侧开始排序进行对齐，
  4. space-between：两端对齐，元素之间的间隔都相等
  5. space-around：每个元素两侧的间隔相等，所以元素之间的间隔比跟边框的间隔大一倍

• align-items ：在交叉轴上进行对齐

  1. stretch：默认值，如果元素没有设置高度或设为auto，将占满整个容器的高度

  2. flex-start：左侧开始排序，交叉轴的起点对齐

  3. flex-end：右侧开始排序，交叉轴的终点对齐

  4. center：居中，交叉轴的中点对齐

  5. baseline: 项目的第一行文字的基线对齐

• flex属性

  • flex-grow, flex-shrink 和 flex-basis的简写

  • flex:1
    

​

​

​

​

​

​

​

​

​

​

​

​

​