页面布局两栏变成一栏（如何实现两栏布局）

如果开始列向左、右、上，该怎么办？如何实现两栏布局和合适的改编？

两栏版式的效果是将页面分成左右宽度不等的两栏，较小的一栏设置为固定宽度，剩余的宽度由另一栏填充。

比如Ant Design document，蓝 域是主要的内容布局容器，侧边栏是次要的内容布局容器。

双栏布局非常常见，它通常与一个固定宽度的栏和一个自适应栏并排显示。

实现思路也很简单

使用float left将模块左列浮动到右列，使用margin-left将内容块支撑出来以供内容显示。为父元素添加BFC，以防止下面的元素飞到上面。内容代码如下

风格。box{ overflow:隐藏；加上BFC}。left { float: left宽度 200 px；背景色灰色；height: 400px} .right { margin-left : 210 px；背景色浅灰色；height: 200px}/style div class= ；盒子 div class= 左 左/div div class= ；右 right /div/div另一个更简单的用法是采用flex灵活布局。

flex弹性布局

风格。box { display: flex} .left { width: 100px} .右{ flex : 1；}/style div class= ；盒子 div class= 左 左/div div class= ；右 right /div/divflex可以说是更好的解决方案，代码少，使用简单。

请注意，flex容器的默认属性值是 align-items : stretch；

这个属性导致了列高的效果。为了使这两个框高度自动化，您需要设置 align-items : flex-start。

如何实现两栏布局，如何设置页面布局栏