Flexbox布局有哪些常见的误区？

Flexbox布局常见误区

1. 混淆主轴和交叉轴方向

• 误区：认为flex-direction只改变主轴方向

• 正确：同时影响交叉轴方向（主轴为column时，交叉轴变为水平方向）

2. 错误理解flex-grow

• 误区：认为flex-grow按比例分配所有空间

• 正确：只分配剩余空间（基础尺寸由flex-basis或内容决定后）

3. 默认对齐方式误解

• 误区：项目默认在容器中居中

• 正确：默认align-items: stretch（交叉轴拉伸填充）

4. flex缩写属性顺序

• 误区：随意书写flex: 1 1 auto

• 正确：必须按flex-grow | flex-shrink | flex-basis顺序

5. 百分比尺寸失效

• 误区：直接使用width: 50%

• 正确：应使用flex-basis: 50%或配合flex-shrink:0

正确用法示例

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

/* 正确示范 */
.container {
  display: flex;
  flex-direction: row; /* 默认值可省略 */
  justify-content: space-between; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
  height: 200px; /* 必须显式设置交叉轴尺寸 */
}

.item {
  flex: 1 0 30%; /* grow | shrink | basis */
  /* 相当于：
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 30%;
  */
  max-width: 200px; /* 配合flex-shrink限制最小尺寸 */
}

关键概念

1. 主轴方向：由flex-direction定义（row/column）

2. 对齐控制：

• justify-content：主轴对齐

• align-items：交叉轴单行对齐

• align-content：交叉轴多行对齐

3. 项目属性：

• flex缩写：推荐优先使用

• align-self：覆盖单个项目的交叉轴对齐

浏览器兼容提示

• 旧版语法需要-webkit-前缀（iOS 8-9等）

• gap属性在Flexbox中较新（2021年后广泛支持）