flex 布局（css）

1、常见的父项布局

• flex-direction 设置主轴的方向

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右。
row-reverse ：表示沿水平方向，由右到左
column：表示垂直方向，由上到下
column-reverse:表示垂直方向，由下到上

• justify-content： 设置主轴上的子元素排列方式 属性定义了项目在主轴上的对齐方式
  注意： 使用这个属性之前一定要确定好主轴是哪个

flex-start：默认值，左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐
space-around：每个项目两侧的间距相等

• flex-wrap： 设置子元素是否换行

nowrap 默认 不换行
wrap 换行

• align-content： 设置侧轴上的子元素的排列方式（多行）
  

• align-items：设置侧轴上的子元素排列方式（单行）

flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中 （垂直居中）
stretch 拉伸

align-content 和 align-items 区别

• align-items 适用于单行情况下， 只有上对齐、 下对齐、居中和拉伸
• align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  总结就是单行找align-items多行找 align-content

• flex-flow： 复合属性， 相当于同时设置了 flex-direction 和 flex-wrap

2、常见的子项布局

• flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0
  
  案例一

案例二

案例二

• align-self控制子项自己在侧轴上的排列方式
  align-self属性允许单个项目有与其他项目不一样的对齐方式，
  可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  

• order属性定义项目的排列顺序,数值越小，排列越靠前，默认为0。
  注意：和z-index 不一样(相反的意思)。
  

  image.png