CSS-flex

父元素

flex-flow

• 复合属性。flex-direction flex-wrap

flex-direction

• 该属性通过定义 flex 容器的主轴方向来决定 felx 子项在 flex 容器中的位置。
• 默认值：row
• 属性值：
  • row：从左到右为主轴
  • row-reverse：从右到做为主轴
  • column：从上到下为主轴
  • column-reverse：从下到上为主轴

flex-wrap

• 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
• 默认值：nowrap
• 属性值：
  • nowrap：单行
  • wrap：多行，副轴从上到下
  • wrap-reverse：多行，副轴从下到上

justify-content

• 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
• 默认值：
  • flex-start：行内的项目集中在行的开始位置
  • flex-end：行内的项目集中在行的结束位置
  • center：行内的项目集中在行的中间位置
  • space-between：行内的项目，第一列在开始位置，最后一列在结束位置，其他都在中间位置
  • space-around：行内的项目，每一列都在中间位置

align-items

• 定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。
• 默认值：stretch
• 属性值：
  • stretch：行内的项目占满整行
  • center：行内的项目位于该行的正中，不再占满整行
  • flex-start：行内的项目位于该行的开始，不再占满整行
  • flex-end：行内的项目位于该行的结尾，不再占满整行
  • baseline：行内的项目位于该行的基线（好像就是开始位置），不再占满整行

align-content

• 行和行之间的位置关系，除了stretch其他都要求行有固定高度
• 默认值：stretch
• 属性值：
  • center:所有行集中在中间，
  • flex-start：所有行集中在开始位置
  • flex-end：所有行集中在结束位置
  • stretch：每一行的项占满整行的空间
  • space-between:第一行内的项目在开始位置，最后一行内的项目在结束位置，其他行内的项目都在中间位置
  • space-around：所有行内的项目都在中间位置

——————————————————————————————————————————————————————————————————

子元素

flex

• 复合属性flex-grow、flex-shrink、flex-basis

flex-grow

• 设置或检索弹性盒的扩展比率。
• 默认值：0
• 属性值:number

flex-shrink

• 设置或检索弹性盒的收缩比率。
• 默认值：1
• 属性值：number

flex-basis

• 设置或检索弹性盒伸缩基准值。
• 默认值：auton
• 属性值：
  • 一个长度单位或百分比
  • auto
• 注释：即使设置为确定的长度单位，当元素内容溢出时，该元素依然会被扩展已保证内部元素被正确显示

align-self

• 定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式。
• 默认值：auot
• 属性值：
  • stretch：该项目占满整行
  • center：该项目位于该行的正中，不再占满整行
  • flex-start：该项目位于该行的开始，不再占满整行
  • flex-end：该项目位于该行的结尾，不再占满整行
  • baseline：该项目位于该行的基线（好像就是开始位置），不再占满整行

order

• 设置或检索弹性盒模型对象的子元素出现的順序
• 默认值：0
• 属性值：number