flex 容器的 flex-flow, justify-content, align-items, align-content 属性的功能及参数 ----0324

flex 容器中的四个属性的功能，参数及作用

序号	属性	描述
1	flex-flow	主轴方向与换行方式
2	justify-content	项目在主轴上的对齐方式
3	align-items	项目在交叉轴上的对齐方式
4	align-content	项目在多行容器中的对齐方式

1. flex-flow 主轴方向与换行方式

• flex-direction 和 flex-wrap , 可简写为 flex-flow

/* 主轴方向： 默认水平,行 */
flex-direction: row;
/* 禁止换行 */
flex-wrap: nowrap;
/* 简化 */
/* flex-flow: 主轴方向 是否换行; */
flex-flow: row nowrap;

• 单行容器

.box {
  display: flex;
  /* 水平排列，不换行 */
  flew-flow: row nowrap;
}

• 多行容器

.box {
  display: flex;
  /* 水平方向，允许换行 */
  /* flex-flow: row wrap; */
  /* 垂直方向不换行， 这是手机端常用的方式*/
  flex-flow: column nowrap;
}

2. justify-content 项目在主轴上的对齐方式

/* 设置项目在主轴的对齐方式的前提是: 主轴上存在剩余空间 */
/* 项目在主轴上的对齐方式: justify-content */
/* 1. 将所有项目看成一个整体来处理 */
/* flex-start，元素从容器的起始线排列 */
justify-content: flex-start;
/* flex-end，从终止线开始排列 */
justify-content: flex-end;
/* center，在中间排列 */
justify-content: center;
/* 2. 将所有项目看成一个个独立的个体来处理 */
/* 二端对齐 :均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点*/
justify-content: space-between;
/* 分散对齐 :使每个元素的左右空间相等 */
justify-content: space-around;
/* 平均对齐 :均匀排列每个元素，每个元素之间的间隔相等*/
justify-content: space-evenly;

3. align-items 项目在交叉轴上的对齐方式

/* 项目在交叉轴上的对齐方式: align-items */
/* 默认值, stretch使 flex元素会默认被拉伸到最高元素的高度 */
align-items: stretch;
/* flex-start，使flex元素按flex容器的顶部对齐 */
align-items: flex-start;
/* flex-end 使它们按flex容器的下部对齐 */
align-items: flex-end;
/* center 使它们居中对齐 */
align-items: center;

4.align-content 项目在多行容器中的对齐方式

.container {
  display: flex;
  /* 转为多行容器 */
  flex-flow: row wrap;
  /* 多行容器中对齐时,主轴是没有剩余空间的,为什么?有剩余空间就不换行 */
  /* 换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间 */
  align-content: stretch;
  /* 1.将交叉轴上所有项目看成一个整体 */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  /* 2.看成个体 */
  /* 二端对齐 */
  align-content: space-between;
  /* 分散对齐 */
  align-content: space-around;
  /* 平均对齐 */
  align-content: space-evenly;
}