HTML布局之左右布局

作为一名合格的前端程序员，各种布局方式是肯定要熟练的，可我就是这么一个不合格的前端，这里记录一下左右布局的实现思路 

1. 父元素容器设置固定高度，设置flex ，宽度可以设为100%或者具体像素，根据业务需求来定
2. 父元素下有两个子元素，分别为左右容器
3. 左容器或右容器均可以设置固定宽度(如果仅是左右布局，可设置一个宽，另一方flex设为1)，高度为100%父级高度，纵向溢出自动
4. 补充说明：当然了，你想自己自定义滚动条的样式也是可以的

具体代码如下：

<div class="layout">
    <aside class="aside">
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p> 
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
        <p>1++</p>
    </aside>
    <article class="article">
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
        <p>2++</p>
    </article>
</div>

.layout{
    width: 100%;
    height: 100vh;
    display: flex;
}
.aside{width: 300px;height: 100%;overflow-y: auto;}
.article{flex: 1;height: 100%;overflow-y: auto;background-color: #09f;}