弹性盒子(Flexbox)全面学习指南

弹性盒子(Flexbox)全面学习指南

弹性盒子(Flexbox)是CSS3中一种强大的布局模式，它提供了更有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或动态的。

一、基本概念

1. Flex容器与Flex项目

.container {
  display: flex; /* 或 inline-flex */
}

• Flex容器：设置了display: flex的元素
• Flex项目：Flex容器内的直接子元素

2. 主轴与交叉轴

• 主轴(main axis)：Flex项目的排列方向
• 交叉轴(cross axis)：与主轴垂直的方向

二、容器属性

1. flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

控制主轴方向

2. flex-wrap

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

控制项目是否换行

3. justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

控制主轴对齐方式

4. align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

控制交叉轴对齐方式

5. align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

控制多行项目的对齐方式

三、项目属性

1. order

.item {
  order: <integer>; /* 默认0 */
}

控制项目排列顺序

2. flex-grow

.item {
  flex-grow: <number>; /* 默认0 */
}

定义项目放大比例

3. flex-shrink

.item {
  flex-shrink: <number>; /* 默认1 */
}

定义项目缩小比例

4. flex-basis

.item {
  flex-basis: <length> | auto; /* 默认auto */
}

定义项目在分配多余空间前的基准大小

5. flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-grow, flex-shrink和flex-basis的简写

6. align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

允许单个项目有与其他项目不一样的对齐方式

四、实际应用示例

1. 水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 等宽三栏布局

.container {
  display: flex;
}
.item {
  flex: 1;
}

3. 响应式导航栏

.nav {
  display: flex;
  flex-wrap: wrap;
}
.nav-item {
  flex: 1 0 200px;
}

五、浏览器兼容性

Flexbox在现代浏览器中有很好的支持，但在旧版浏览器(如IE10及以下)可能需要前缀或替代方案。

六、学习资源推荐

1. MDN Flexbox文档

2. CSS-Tricks Flexbox指南

3. Flexbox Froggy游戏 - 通过游戏学习Flexbox