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

展示

默认值 stretch

flex-start

flex-end

center

space-between

space-around

space-evenly

代码

• HTML：

  <section>
      <h4>默认值 stretch</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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <h4>flex-start</h4>
      <div class="container flex-start">
          <div><img src="nature-7.jpg"></div>
          <div><img src="wallpaper-3.jpg"></div>
          <div><img src="nature-8.jpg"></div>
          <div><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>
  <section>
      <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><img src="wallpaper-2.jpg"></div>
          <div><img src="nature-4.jpg"></div>
      </div>
  </section>

• CSS：

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