CSS 柔性 响应式
响应式弹性框
您从中学到 CSS 媒体查询 章节中介绍了如何使用媒体查询为不同的屏幕尺寸和设备创建不同的布局。
笔记本电脑和台式电脑：
1
2
3
移动的 和平板电脑：
1
2
3
例如，如果您想要为大多数屏幕尺寸创建两列布局，并为小屏幕尺寸（如手机和平板电脑）创建单列布局，则可以更改 flex-direction 从row 到column 在特定的断点处（在下面的例子中为 800px）：
例子
.flex 容器 {
显示：弹性；
弹性方向：行；
}
/* 响应式布局 - 采用单列布局而不是双列布局 */
@media（最大宽度：800px）{
.flex 容器 {
弹性方向： 列；
}
}
亲自尝试 »
另一种方法是改变 flex 弹性项目的属性，为不同的屏幕尺寸创建不同的布局。请注意，我们还必须包含flex-wrap: wrap; 在这个例子中，flex 容器必须能够正常工作：
例子
.flex 容器 {
显示：弹性；
弹性包裹：包裹；
}
.flex-item-left {
弯曲：50%；
}
.flex-item-right {
弯曲：50%；
}
/* 响应式布局 - 采用单列布局而不是双列布局 */
@media（最大宽度：800px）{
.flex-item-right，.flex-item-left {
弯曲：100%；
}
}
亲自尝试 »
放置您的广告！
使用 Flexbox 的响应式图库
使用 flexbox 创建一个响应式图库，根据屏幕尺寸，图库中包含四张、两张或全宽图像：
亲自尝试 »使用 Flexbox 的响应式网站
使用 flexbox 创建一个响应式网站，包含灵活的导航栏和灵活的内容：
亲自尝试 »
