flex布局属性

许久未碰前端，今日发现把竟然flex布局属性忘得差很少了，复习一下。

flex布局就是将flex item放置在flex container中，经过在container或item上添加属性来很是容易的改变布局。

---

容器属性

• flex-direction—————决定主轴的排列方向，属性决定从哪边开始

  • row ————————从main axis的左端开始排列
  • row-reverse ————从main axis的右端开始排列
  • column ——————从cross axis的上方排列
  • column-reverse———从cross axis的下方排列

• flex-wrap ————————全部item排在一条axis上，属性决定如何换行

  • nowrap ——————不换行
  • wrap ———————第一行在上方
  • wrap-reverse ————第一行在下方

• flex-flow———————flex-direction和flex-wrap和集合，属性用||隔开

• justify-content————在main axis上的对齐方式

  • flex-start ——————左对齐
  • flex-end ——————右对齐
  • center ———————居中
  • space-between ———两端对齐
  • space-around ———分散对齐

• align-items—————在cross axis上如何对齐

  • flex-start ——————下方对齐
  • flex-end ———————上方对齐
  • center ————————中点对齐
  • baseline ———————第一行文字的基线对齐
  • stretch————————默认，布满整个容器高度

• align-content——————多根轴的对齐方式

  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch（默认值）：轴线占满整个交叉轴

---

项目属性

• order————————排列顺序
• flex-grow——————项目放大比例
• flex-shrink——————缩小比例
• flex-basis——————占据主轴空间
• flex————————flex-grow, flex-shrink 和 flex-basis的合集
• align-self——————容许单个项目有与其余项目不同的对齐方式，优先级最高