浅谈CSS实现两列布局

最近在忙着各种面试，笔试，碰到这样的问题比较多，打算在这里记录下自己对两列布局的一些实现方法的总结

下面我将用三个方法实现左栏固定，右栏自适应宽度的布局

两列布局

<div class="parent">
     <div class="side"></div>
     <div class="main"></div>
</div>

1.Flex

.parent{
    display: flex;
}

.side{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background: #555;
}

.main{
    flex: 1;
    background: #ddd;
}

flex 默认有三个属性 flex-grow , flex-shrink 和 flex-basis,默认值为 0 | 1 | auto

2.Position

.parent{
    position: relative;
}

.side{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    background: #555;
}

.main{
    height: 200px;
    position: absolute;
    left: 210px;
    right: 0;
    background: #ddd;
}

.main 宽度为默认值 auto，占据整行并根据left、right调整

3.Float

.parent{  
}

.side{
    width: 200px;
    height: 200px;
    float: left;
    background: #555;
}

.main{
    height: 200px;
    margin-left: 210px;
    background: #ddd;
}

具体使用哪一种方式，还是根据实际情况选择