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

展示

代码

• HTML：

  <h4>第2项设置align-self: flex-end</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>

• CSS：

  .container {
      display: flex;
      height: 150px;
      outline: 1px dotted;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  .container > div:nth-child(2) {
      align-self: flex-end;
  }