面试题：CSS中Flexbox与Grid在响应式网页布局里基础运用

Question

请阐述在一个简单的三栏布局场景下，分别使用Flexbox和Grid实现的基本代码结构，并说明如何通过媒体查询来使其在不同屏幕尺寸下呈现响应式效果。

Answer 1

Flexbox 实现三栏布局

1. HTML 结构：

<div class="container">
    <div class="left-column">Left Column</div>
    <div class="middle-column">Middle Column</div>
    <div class="right-column">Right Column</div>
</div>

2. CSS 样式：

.container {
    display: flex;
}
.left-column {
    flex: 1;
    background-color: lightblue;
}
.middle-column {
    flex: 2;
    background-color: lightgreen;
}
.right-column {
    flex: 1;
    background-color: pink;
}

通过媒体查询实现响应式

@media (max - width: 768px) {
    .container {
        flex - direction: column;
    }
}

Grid 实现三栏布局

1. HTML 结构：

<div class="grid - container">
    <div class="left - grid - column">Left Column</div>
    <div class="middle - grid - column">Middle Column</div>
    <div class="right - grid - column">Right Column</div>
</div>

2. CSS 样式：

.grid - container {
    display: grid;
    grid - template - columns: 1fr 2fr 1fr;
}
.left - grid - column {
    background - color: lightblue;
}
.middle - grid - column {
    background - color: lightgreen;
}
.right - grid - column {
    background - color: pink;
}

通过媒体查询实现响应式

@media (max - width: 768px) {
    .grid - container {
        grid - template - columns: 1fr;
    }
}

在上述代码中，Flexbox 通过 flex 属性分配列宽，在小屏幕通过改变 flex - direction 为 column 实现响应式。Grid 通过 grid - template - columns 定义列宽，小屏幕通过修改 grid - template - columns 为单栏实现响应式。