CSS——Flex 弹性布局

Flex 弹性布局

常见的父项属性

flex-direction： 设置主轴的方向

在flex布局中，是分为主轴和侧轴俩个方向，同时可以称之为：行和列、x轴和y轴。

• 默认主轴方向是x轴，水平向右

• 默认侧轴方向是y轴，水平向下

  
  
  flex布局默认主、侧轴方向
  
  
  主轴方向

flex- justify-content

设主轴上子元素的排列

flex换行

设置侧轴上的元素排列方式（单行）

设置侧轴上的子元素的排列方式（多行）

3.6 align-content和align-items区别

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

• 总结：单行找align-items，多行找align-content

  
  
  flex-flow(direction和wrap的符合属性)

Flex布局子项常见属性

• flex子相互占的份数
• alogn-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

子项的flex属性

子项的align-self属性

子项的align-order属性