面试题：CSS响应式网页开发之布局问题

Question

在开发一个响应式网页时，需要实现当屏幕宽度小于600px时，原本水平排列的三个div变为垂直排列，并且每个div宽度占满屏幕。请使用CSS的Flexbox或Grid布局方式实现，并说明两种布局方式在这种场景下的优缺点。

Answer 1

使用Flexbox布局实现

.container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: 100%;
  }
}

使用Grid布局实现

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Flexbox布局优缺点

• 优点：
  • 语法相对简单，易于理解和上手，对于简单的一维布局非常适用。
  • 对浏览器的兼容性较好，几乎所有现代浏览器都支持。
• 缺点：
  • 主要用于一维布局，对于复杂的二维布局不如Grid布局直观和强大。

Grid布局优缺点

• 优点：
  • 专门为二维布局设计，能够更方便地创建复杂的网格结构，在这种场景下代码可能更简洁。
  • 可以通过定义行和列的轨道，精确控制元素的位置和大小。
• 缺点：
  • 语法相对复杂，对于初学者可能有一定难度。
  • 在一些较旧的浏览器中兼容性不如Flexbox。