主轴方向

  1. ul {
  2.   display: flex;
  3.   flex-direction: column;
  4. }
属性值 描述
row 从左到右(默认值)
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

主轴排列方式

ul {
  display: flex;
  justify-content: center;
}
属性值 描述
flex-start 从左到右(默认值)
flex-end 从尾部开始排列
center 居中对齐
space-around 平分空间
space-between 两边对齐

是否换行

ul {
  display: flex;
  flex-wrap: wrap;
}
属性值 描述
no-wrap 不换行(默认值)
wrap 换行

侧轴排列方式

多行

ul {
  display: flex;
  flex-wrap: wrap;
  align-conetnt: center;
}
属性值 描述
flex-start 从侧轴头部开始排列
flex-end 从侧轴尾部开始排列
center 侧轴中间显示
space-around 子项在侧轴平分空间
space-between 两边对齐
stretch 设置子项高度平分父高度

单行

ul {
  display: flex;
  align-items: center;
}
属性值 描述
flex-start 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸(默认值)

flex-flow

ul {
  display: flex;
  /* flex-flow: 主轴方向 是否换行; */
  flex-flow: direction wrap;
}
  • 相当于同时设置了flex-direction``flex-wrap