justify-content 属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个

属性值 说明
flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中)
space-around 平分剩余空间
space-between 先两边贴边再平分剩余空间(重要)

代码

  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.       justify-content: flex-start;
  18.       /* justify-content: flex-end; */
  19.       /* justify-content: center; */
  20.       /* justify-content: space-around; */
  21.       /* justify-content: space-between; */
  22.     }
  24.     div span {
  25.       width: 100px;
  26.       height: 100px;
  27.       background-color: red;
  28.     }
  29.   </style>
  30. </head>
  32. <body>
  33.   <div>
  34.     <span>1</span>
  35.     <span>2</span>
  36.     <span>3</span>
  37.     <span>4</span>
  38.   </div>
  39. </body>
  41. </html>