CSS3 弹性响应式

---

响应式 Flexbox

您从 媒体查询 一章中了解到，可以使用媒体查询为不同屏幕大小的设备创建不同的布局。

笔记本电脑和台式电脑:

1 2 3

手机和平板电脑:

1 2 3

例如，如果要为大多数屏幕尺寸创建两列布局，为小屏幕尺寸（如手机和平板电脑）创建一列布局，可以在特定断点（以下示例中为800px）将 flex-direction 从 row 更改为 column:

实例

.flex-container {
  display: flex;
  flex-direction: row;
}

/*响应式布局 - 制作一列布局而不是两列布局 */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

亲自试一试 »

另一种方法是更改 flex 项的 flex 属性的百分比， 以便为不同的屏幕大小创建不同的布局。请注意，我们还必须在 flex 容器中包含 flex-wrap: wrap; ，以使本例生效:

实例

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* 响应式布局 - 制作一列布局而不是两列布局 */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

亲自试一试 »

---

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化:

亲自试一试 »

---

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容:

亲自试一试 »

---

CSS3 Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性:

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	用于弹性项目。覆盖容器的 align-items 属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。