justify-content属性值基本效果示意实例页面

展示

代码

• HTML：

  <h4>默认值 flex-start</h4>
  <div class="container">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>flex-end</h4>
  <div class="container flex-end">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>center</h4>
  <div class="container flex-center">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>space-between</h4>
  <div class="container space-between">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>space-around</h4>
  <div class="container space-around">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>space-evenly</h4>
  <div class="container space-evenly">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>

• CSS：

  .container {
      display: flex;
      outline: 1px dotted;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  
  .flex-end {
      justify-content: flex-end;
  }
  .flex-center {
      justify-content: center;
  }
  .space-between {
      justify-content: space-between;
  }
  .space-around {
      justify-content: space-around;
  }
  .space-evenly {
      justify-content: space-evenly;
  }