设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值

属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-content 和 align-items 区别

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

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     div {
  12.       display: flex;
  13.       width: 500px;
  14.       height: 500px;
  15.       background-color: blue;
  16.       flex-direction: row;
  17.       flex-wrap: wrap;
  18.       justify-content: center;
  19.       align-content: center;
  20.       /* align-content: flex-start; */
  21.       /* align-content: flex-end; */
  22.       /* align-content: space-around; */
  23.       /* align-content: space-between; */
  24.       /* align-content: stretch; */
  25.     }
  28.     div span {
  29.       width: 100px;
  30.       height: 100px;
  31.       margin: 10px;
  32.       background-color: red;
  33.     }
  34.   </style>
  35. </head>
  37. <body>
  38.   <div>
  39.     <span>1</span>
  40.     <span>2</span>
  41.     <span>3</span>
  42.     <span>4</span>
  43.     <span>5</span>
  44.     <span>6</span>
  45.     <span>7</span>
  46.     <span>8</span>
  48.   </div>
  49. </body>
  51. </html>

image.png