简单理解flex布局

这个布局我诸葛小亮布定了！！！

flex

• flex核心概念是容器和轴，父子容器各6个

容器

• 父容器能够统一设置子容器的排列方式，自容器也能够单独设置自身的排列方式，若是二者同时设置，以子容器设置为准

父容器

• flex-wrap决定子容器是否换行

  • nowrap: 不换行
  • wrap：换行
  • wrap-reverse 逆序换行

• flex-flow 决定子容器轴向与换行设置，它是复合属性，至关于flex-direction与flex-wrap组合，可选取的值

  • row ，column 可单独设置主轴方向
  • wrap, nowrap 可单独设置换行
  • row nowrap, column wrap

• 设置子容器主轴（横向）排列justify-content

  • flex-start 起始端对齐
  • flex-end末尾段对齐
  • center居中对齐
  • space-around 子容器沿主轴分布，位于首尾的子容器到父容器的距离是子容器间距的一半
  • space-between 子容器沿主轴均匀分布，位于首尾的子容器与父容器相切

• 设置子容器沿交叉轴（纵向）排列align-items（用于定义如何沿交叉轴方向分配子容器的间距）

  • flex-start 起始端对齐
  • flex-end末尾端对齐
  • center 居中对齐
  • baseline 基线对齐，全部子元素中的首行文字对齐
  • stretch 子容器沿交叉轴方向的尺寸拉伸至于父容器一致(让子容器高度和父容器高度一致）

子容器

• 在主轴上使用flex进行伸缩，flex的值能够是无单位数字（1,2,3）能够是有单位数字（15px,30px,）还能够是none关键字。子容器会按照flex定义的尺寸比例自动伸缩，若是去none则不伸缩
• align-self 单独设置子容器如何沿交叉轴（纵轴）排列
  • flex-start起始端对齐
  • flex-end 末尾端对齐
  • center居中对齐
  • baseline 基线对齐
  • stretch拉伸对齐

轴

• 主轴
  • flex-direction: row 从左向右排列
  • flex-direction: column从上向下排列
  • flex-direction: row-reverse 从右向左排列
  • flex-direction: column-reverse 从下往上排列