面试题：Flutter布局与Flexbox：复杂响应式布局

Question

假设要开发一个适配多种屏幕尺寸的应用界面，使用Flexbox布局，在大屏幕上展示三列等宽内容，在小屏幕上展示一列内容，你将如何实现？请阐述思路并给出核心代码片段。

Answer 1

思路

1. 使用媒体查询（media query）来检测屏幕尺寸。根据不同的屏幕尺寸，应用不同的Flexbox布局规则。
2. 在大屏幕（通常指桌面端），设置Flex容器的display: flex，并使子元素的flex-basis为33.33%以实现三列等宽。
3. 在小屏幕（通常指移动端），设置Flex容器的display: flex，并将子元素的flex-basis设置为100%以实现一列布局。

核心代码片段（以CSS为例）

/* 大屏幕布局 */
@media (min-width: 768px) {
  .flex-container {
        display: flex;
    }
  .flex-item {
        flex-basis: 33.33%;
    }
}

/* 小屏幕布局 */
@media (max-width: 767px) {
  .flex-container {
        display: flex;
        flex-direction: column;
    }
  .flex-item {
        flex-basis: 100%;
    }
}

HTML结构可能如下：

<div class="flex-container">
    <div class="flex-item">内容1</div>
    <div class="flex-item">内容2</div>
    <div class="flex-item">内容3</div>
</div>