Flexbox 布局入门：从两端对齐说起

Flexbox 是现代网页布局里最常用也最好上手的工具之一。很多初学者被 justify-content、align-items 这些名字吓到，其实只要抓住两个概念，剩下的就顺理成章了。

两个轴

Flex 容器里有两条轴：主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平的，交叉轴是垂直的。绝大多数对齐属性，都是在问你「沿主轴怎么排」或「沿交叉轴怎么排」。

最常用的两端对齐

想让两个元素分别贴在左右两端，用 justify-content: space-between 即可：

.bar {
  display: flex;
  justify-content: space-between;
}

此外 flex-start（靠起点）、center（居中）、space-around（两侧留白）也都是高频取值，按需取用即可。

交叉轴居中也别忘

垂直居中一直是个经典难题，用 Flexbox 一行就解决：

.box {
  display: flex;
  align-items: center;      /* 交叉轴居中 */
  justify-content: center;  /* 主轴居中 */
}

小记：先把「主轴 / 交叉轴」这两个词在脑子里站稳，再去记属性名，会轻松很多。

更多内容可回到 笔记列表 继续阅读。