Flex布局（弹性布局）学习笔记

flex container

1. 相关的css属性

   1. flex-flow是felx-direction和flex-wrap的缩写属性

   2. flex-direction（决定主轴的方向）
      1. row:主轴方向从左到右 默认值
      2. row-reverse:主轴方向从右到左
      3. column:主轴方向从上到下
      4. column-reverse:主轴方向从下到上

   3. flex-wrap
      1. nowrap：不换行 压缩
      2. wrap：换行
      3. wrap-reverse：交叉轴方向反转换行 了解即可

   4. justify-content（决定flex items在main axis上的对齐方式）
      1. flex-start:与main start对齐 默认值
      2. flex-end:与main end对齐
      3. center:居中对齐
      4. space-between：flex items之间的距离相等，与main start、main end两端对齐
      5. space-evenly：flex items之间的距离相等，距main start、main end的距离也与flex items之间的距离相等
      6. space-around：flex items之间的距离相等，flex items 与main start、main end之间的距离是flex items之间距离的一半

   5. align-items（flex items在cross axis上的对齐方式）
      1. normal：在弹性布局中，效果和stretch一样
      2. stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
      3. flex-start：与cross start对齐
      4. flex-end：与cross end对齐
      5. center：居中对齐
      6. baseline：与基准线对齐（与第一个元素第一行文本的基线对齐）

   6. align-content（多行元素在交叉轴方向上的对齐方式）
      1. flex-start:与cross start对齐 默认值
      2. flex-end:与cross end对齐
      3. center:居中对齐
      4. space-between：flex items之间的距离相等，与cross start、cross end两端对齐
      5. space-evenly：flex items之间的距离相等，距cross start、cross end的距离也与flex items之间的距离相等
      6. space-around：flex items之间的距离相等，flex items 与cross start、cross end之间的距离是flex items之间距离的一半
      7. stretch（默认值）：与align-items的stretch类似

flex items

1. 相关的css属性
   1. flex
   2. flex-grow
   3. flex-basis
   4. flex-shrink
   5. order:定义flex items排列顺序
   6. align-self：可覆盖flex container设置的align-items
      1. auto：遵从flex container 的设置 默认值
      2. stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

学习视频链接