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

参考资料

1. CSS阴影透明度设置
2. css阴影效果代码
3. CSS响应式详细说明以及案例
4. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
5. css3中设置阴影的属性是
6. align-items: flex-start/end详细说明
7. 层次/关系选择器详细说明以及案例
8. CSS格式化/压缩有哪些

基本概念

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-前缀。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。