CSS Flex 响应式
响应式 Flexbox
您已从 CSS 媒体查询章节了解到，可以使用媒体查询为不同屏幕尺寸和设备创建不同的布局。
笔记本电脑和台式机
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 创建一个响应式网站，其中包含一个灵活的导航栏和灵活的内容。
自己动手试一试 »
