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

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

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

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

  • flex-direction 和 flex-wrap , 可简写为 flex-flow
  1. /* 主轴方向: 默认水平,行 */
  2. flex-direction: row;
  3. /* 禁止换行 */
  4. flex-wrap: nowrap;
  5. /* 简化 */
  6. /* flex-flow: 主轴方向 是否换行; */
  7. flex-flow: row nowrap;
  • 单行容器
  1. .box {
  2. display: flex;
  3. /* 水平排列,不换行 */
  4. flew-flow: row nowrap;
  5. }
  • 多行容器
  1. .box {
  2. display: flex;
  3. /* 水平方向,允许换行 */
  4. /* flex-flow: row wrap; */
  5. /* 垂直方向不换行, 这是手机端常用的方式*/
  6. flex-flow: column nowrap;
  7. }

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

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

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

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

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

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