CSS 弹性响应式

响应式弹性盒

你从CSS 媒体查询您可以使用媒体查询为不同的屏幕尺寸和设备创建不同的布局。

笔记本电脑和台式机：

移动的电话和平板电脑：

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

示例

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

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

亲自试一试 »

另一种方法是改变百分比flexFlex 项目的属性可以为不同的屏幕尺寸创建不同的布局。请注意，我们还必须包括flex-wrap: wrap;在 Flex 容器上，此示例可以正常工作：

示例

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

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

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

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}

亲自试一试 »

使用 Flexbox 的响应式图片库

使用 Flexbox 创建一个响应式图片库，根据屏幕尺寸，该图片库可以包含四个、两个或全宽图片：

亲自试一试 »

使用 Flexbox 的响应式网站

使用flexbox创建响应式网站，包含灵活的导航栏和灵活的内容：

亲自试一试 »