面试题：CSS Flexbox弹性盒子布局：复杂布局实现

Question

假设要创建一个三列布局，中间列自适应宽度，两侧列固定宽度，并且三列高度相等。使用Flexbox布局实现该效果，并解释布局过程中所涉及的关键Flexbox属性和它们的取值原理。另外，当窗口大小改变时，如何确保布局仍然保持合理且美观？

Answer 1

HTML 结构

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS 样式

.container {
  display: flex;
  /* 使子元素在一行排列 */
  flex-direction: row; 
  height: 100vh; /* 设置容器高度，这里以视口高度为例 */
}

.left, .right {
  width: 200px; /* 固定宽度 */
  background-color: lightblue;
  /* 使三列高度相等 */
  display: flex; 
  flex-direction: column; 
}

.center {
  flex: 1; /* 自适应宽度，占据剩余空间 */
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

关键 Flexbox 属性及取值原理

1. display: flex：将容器设置为 Flex 布局模式，使子元素能够使用 Flexbox 属性进行布局。
2. flex-direction: row：指定子元素在容器内沿水平方向（行）排列。若取值为 column，则子元素会沿垂直方向（列）排列。
3. width: 200px：为左侧和右侧列设置固定宽度。
4. flex: 1：应用于中间列，它是 flex-grow, flex-shrink, flex-basis 三个属性的缩写。这里 flex: 1 表示 flex-grow: 1, flex-shrink: 1, flex-basis: 0%。flex-grow 设置为 1 意味着该元素会根据可用空间按比例增长，占据剩余空间，实现自适应宽度。
5. 子元素 display: flex 和 flex-direction: column：使子元素内部也采用 Flex 布局且垂直排列，这样可以确保子元素在垂直方向上填满容器高度，从而实现三列高度相等。

窗口大小改变时确保布局合理美观

1. 使用媒体查询：根据不同的屏幕宽度设置不同的布局。例如，在较小屏幕宽度下，将 Flex 方向改为 column，使三列垂直堆叠，以适应移动设备屏幕。

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .left, .center, .right {
    width: 100%;
  }
}

2. 设置最小宽度和高度：为容器或子元素设置最小宽度和高度，避免在窗口缩小时布局过于紧凑或变形。

.container {
  min-width: 300px;
}

.left, .center, .right {
  min-height: 100px;
}