Flexbox 布局完全指南

Flexbox 是 CSS 中最重要的布局方案之一，它让元素的排列、对齐和空间分配变得前所未有的简单。

一、核心概念

Flex 布局由容器和项目构成，容器的 display: flex 会触发弹性布局。

.container {
  display: flex;          /* 弹性容器 */
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 交叉轴对齐 */
}

二、容器属性

三、实战案例

水平垂直居中

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

两栏布局

.layout {
  display: flex;
  gap: 20px;
}
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

小结

掌握 Flexbox 的关键在于理解"主轴与交叉轴"，多写多练自然就熟。