Flex布局如何配合媒体查询

avatar
作者
筋斗云
阅读量:4

在使用Flex布局时,可以结合媒体查询来实现响应式布局,根据不同设备的屏幕尺寸和方向调整Flex布局的样式。

以下是一个简单的示例:

.container {   display: flex;   flex-wrap: wrap; }  .item {   flex: 1 1 50%; /* 默认每个item占据50%宽度 */ }  @media screen and (max-width: 768px) {   .item {     flex: 1 1 100%; /* 在屏幕宽度小于768px时,每个item占据100%宽度 */   } } 

在上面的例子中,.container是一个使用Flex布局的容器,.item是Flex容器中的子元素。在默认情况下,每个.item元素占据50%的宽度。当屏幕宽度小于768px时,媒体查询生效,.item元素的宽度变为100%。

通过这种方式,可以根据不同的屏幕尺寸和方向灵活调整Flex布局的样式,使页面在不同设备上呈现出最佳的布局效果。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!