九宫格布局 - Flex （有手就会系列）

使用 flex，仅需 4 行 css 轻松实现九宫格布局。

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.box {
  display: flex;
  align-items: center;
}

.item:first-child {
  align-self: flex-start;
}

.item:last-child {
  align-self: flex-end;
}

效果预览

Code Pen 链接