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

展示

代码

• HTML：

  <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>
  <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>
  <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>
  <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>
  <h4>baseline</h4>
  <div class="container baseline">
      x
      <div><img src="nature-7.jpg"></div>
      <div class="large"><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>
      x
  </div>

• CSS：

  .container {
      display: flex;
      flex-wrap: wrap;
      outline: 1px dotted;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  
  .flex-start {
      align-items: flex-start;
  }
  .flex-end {
      align-items: flex-end;
  }
  .flex-center {
      align-items: center;
  }
  .baseline {
      align-items: baseline;
  }