Flex布局如何配合媒体查询

在使用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布局的样式，使页面在不同设备上呈现出最佳的布局效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！