在使用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布局的樣式，使頁面在不同設備上呈現出最佳的布局效果。
