如何利用CSS Flex特性实现Div1、Div2并排Div3居下的固定布局？

要实现div1、div2横向并排，div3位于二者下方的固定结构，不管容器尺寸如何变化都保持这个布局，你可以通过以下CSS配置实现：

首先是你提供的HTML结构：

<div id="container">
  <div id="div1">This is Div 1</div>
  <div id="div2">This is Div 2</div>
  <div id="div3">This is Div 3</div>
</div>

对应的CSS代码：

#container {
  display: flex; /* 将容器设为Flex容器 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

#div1, #div2 {
  flex: 1; /* 让div1和div2平分容器的可用宽度，保持横向并排 */
  /* 如果不需要平分宽度，可替换为 flex-shrink: 0; 固定自身宽度，但会始终并排 */
}

#div3 {
  flex-basis: 100%; /* 强制div3独占一行，无论容器宽度多少 */
}

关键说明： #

• display: flex 把容器转为Flex布局，子元素默认横向排列；
• flex-wrap: wrap 确保当子元素总宽度超过容器时自动换行，这里主要是让div3能换到下一行；
• flex: 1 让div1和div2自动分配容器的可用宽度，保持横向并排且自适应容器大小；如果希望它们保持固定宽度，把这个属性换成 flex-shrink: 0 即可；
• flex-basis: 100% 让div3的基础宽度占满容器整行，从而强制它排列在div1和div2的下方。

这样无论容器的宽高怎么变化，都能始终保持你要的三分结构。

内容的提问来源于stack exchange，提问作者Ay Men