CSS Flex 响应式
响应式 Flexbox
您在 CSS 媒体查询 章节中了解到，您可以使用媒体查询为不同的屏幕尺寸和设备创建不同的布局。
笔记本电脑和台式机
1
2
3
移动 和平板电脑
1
2
3
例如，如果您想为大多数屏幕尺寸创建一个两列布局，而为小屏幕尺寸（如手机和平板电脑）创建一个一列布局，您可以在特定的断点（以下示例中的 800 像素）处将 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 创建一个响应式网站，包含一个灵活的导航栏和灵活的内容
试试看 »
