在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？
传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下：
<!--两列布局，其中左侧固定，右侧自适应--> <div class="left background-color-red height-60 width-300"></div> <div class=" background-color-black height-60 margin-left-301 "></div>
.color-blue { color:blue;}.color-yellow { color:yellow;}.background-color-blue { background-color: blue;}.background-color-black { background-color:black;}.background-color-red { background-color:red;}.background-color-yellow { background-color:yellow;}.height-60 { height:60px;}.border-color-red { border: 2px solid #ff0000;}.left { float:left;}.right { float:right;}.font-size-20{ font-size: 20px;}.line-height-1_5{ line-height: 1.5;}.width-1 { width:100%;}.width-auto { width:auto;}.width-300 { width:300px;}.width-960 { width:960px; }.width-100 { width:100%;}.inline-block { display: inline-block;}/*第一种水平居中方式*/.center-1 { margin: 0 auto;}/*第二种水平居中方式*/.center-2 { position:absolute; left:50%; margin-left:-480px;}.margin-left-301 { margin-left:301px;}
在CSS3推出的盒布局中，可以使用更加简便的方法来更加灵活的控制这样的布局需求，就是利用了box-flex属性，代码如下：
<!--两列布局，其中左侧固定，右侧自适应--> <div class="box"> <!--盒布局--> <div class="background-color-black height-60 width-300"></div> <div class="background-color-red height-60 flex"></div> </div>
.box { display: box; display: -webkit-box;}.flex { -webkit-box-flex: 1;}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
