Flex布局实例

IE10及以上待考究，以下不支持·····

固定aside,弹性article

html

<div class="container">
<section>
    <aside>
        我是侧边菜单,固定宽度150px，么么哒！
    </aside>
    <article>
        我是主要内容。弹性伸缩，思密达！
    </article>
</section>
</div>

css

body,div,ul,li,aside,article{
        margin: 0;
        padding: 0;
        list-style-type: none;

    }
    .container{
      width: 100%;
      max-width: 1290px;
      background: #C0C0C0;
      margin:0 auto;
    }
    section{
        display: flex;
        padding: 15px;
    }
    aside{//想要在右边，可以交换标签先后，也可以设置order:1;
        background: #80FF00;
        width: 150px;
        flex:none;
    }
    article{
        background: #00FFFF;
        flex:auto;
    }