flex实现两栏布局

要使用flex实现两栏布局，你可以使用flex布局的属性来实现。具体的实现方式有多种，以下是其中的一种方法：
首先，在父元素上应用flex布局属性，比如设置display为flex，这样父元素的子元素就可以通过flex属性进行布局。
然后，设置左边元素的固定宽度，可以使用flex属性中的flex-basis来指定宽度，比如设置为200px。
接着，设置右边元素的flex属性为1，这样它会自动填充剩余的空间。
最后，根据需要设置元素的高度和背景颜色等样式。
以下是一个使用flex实现两栏布局的示例代码：

<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
</div>

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}

.right {
  flex: 1;
  height: 100%;
  background: lightseagreen;
}

这样，左边的元素会固定宽度为200px，右边的元素会自动填充剩余的空间。你可以根据实际需求调整元素的高度和样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [实现常用的两栏布局(左侧固定+右侧自适应)以及三栏布局(圣杯布局和双飞翼布局)](https://blog.csdn.net/hzy199772/article/details/125639600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [经典布局 （flex和传统两种实现） 左右两栏式](https://blog.csdn.net/m0_49515138/article/details/129136780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]