使用Flexbox结合min-width可实现响应式两栏布局：1. 父容器设display: flex；2. 侧边栏设min-width: 200px并禁止伸缩；3. 主内容区设flex: 1占剩余空间；4. 小屏幕时通过媒体查询改为垂直堆叠，提升移动端体验。
实现两栏固定布局时，可以使用 Flexbox 结合 min-width 来控制列的最小宽度，同时让主内容区灵活适应容器空间。这种方法既现代又兼容性强，适用于大多数响应式场景。
基本结构与Flexbox容器设置
将父容器设为 display: flex，子元素即会沿主轴排列。通过设置一个侧边栏固定宽度（或最小宽度），另一个主区域自动撑满剩余空间。
示例HTML结构：
<div class="container">
<aside class="sidebar">侧边栏</aside>
<main class="main-content">主内容区</main>
</div>
CSS中启用Flex布局：
.container {
display: flex;
height: 100vh; /* 可选：占满视口高度 */
}
使用 min-width 控制列宽
为侧边栏设置固定的 min-width，并禁止其伸缩；主内容区则允许灵活扩展。
立即学习“前端免费学习笔记（深入）”；
.sidebar {
min-width: 200px;
flex: 0 0 auto; /* 不增长、不收缩、按最小宽度显示 */
background-color: #f4f4f4;
}
.main-content {
flex: 1; / 占据剩余所有空间 /
padding: 20px;
background-color: #fff;
}
这样，侧边栏最小宽度为200px，不会被压缩，而主内容区会随容器变化自动调整宽度。
适配小屏幕设备
在移动端可能需要调整布局方向或切换为单列显示。可通过媒体查询优化体验：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar,
.main-content {
min-width: auto;
}
}
此时两栏垂直堆叠，更适合手机浏览。
基本上就这些。利用 Flexbox 的弹性分配和 min-width 的约束能力，能快速构建稳定且响应式的两栏布局。关键在于理解 flex 属性的三个值含义以及如何防止元素被意外压缩。
