如何用Flex布局制作响应式布局？

参考资料

1. CSS3 阴影
2. div居中样式
3. css div内容居中
4. css布局格式
5. 边框属性详细说明以及案例
6. css怎么使div居中
7. 如何避免 CSS 过渡动画卡顿？
8. 属性选择器详细说明以及案例

基本概念

Flex布局（弹性盒子布局）是一种CSS3布局模式，用于创建灵活的响应式布局结构。

核心属性

容器属性

1. display: flex; - 定义Flex容器

2. flex-direction: - 主轴方向

• row (默认)

• row-reverse

• column

• column-reverse

3. flex-wrap: - 换行方式

• nowrap (默认)

• wrap

• wrap-reverse

4. justify-content: - 主轴对齐

• flex-start (默认)

• flex-end

• center

• space-between

• space-around

5. align-items: - 交叉轴对齐

• stretch (默认)

• flex-start

• flex-end

• center

• baseline

项目属性

1. order: - 排列顺序

2. flex-grow: - 放大比例

3. flex-shrink: - 缩小比例

4. flex-basis: - 初始大小

5. align-self: - 单个项目对齐

响应式示例

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

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

.item {
  flex: 1 0 200px; /* 基础宽度200px，可增长，不缩小 */
  margin: 10px;
}

/* 媒体查询调整 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .item {
    flex-basis: auto;
  }
}

常用模式

1. 等宽列：

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

2. 固定+弹性宽度：

.sidebar {
  flex: 0 0 250px;
}
.main {
  flex: 1;
}

3. 网格布局：

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  flex: 0 0 calc(33.33% - 20px);
  margin: 10px;
}

浏览器支持

所有现代浏览器都支持Flex布局，IE10-11有部分支持，需要加-ms-前缀。