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; }