CSS3 Flex 响应式
响应式 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;
}
}
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%;
}
}
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 属性的简写属性。 |
