结合CSS3的布局新特征谈谈常见布局方法

栗子(利用flex进行上述几种布局实现)

下边把利用flex布局实现上述几种布局的代码贴出来（可有多种实现方法）。

T布局

CSS Code复制内容到剪贴板

<!–css–>   
<style type="text/css">   
    *{margin: 0;padding: 0;}   
    header, footer {background: sandybrown;height: 50px;}   
    section {display: flex;align-items: flex-start;height: 500px;}   
    article {order: 1;flex: 3;align-self: stretch;background: wheat;}   
    aside {flex: 1;background: seashell;height: 100px;}   
</style>   
  
<!–html–>   
<header></header>   
<section>   
    <article></article>   
    <aside></aside>   
</section>   
<footer></footer>   
  

国字型布局

CSS Code复制内容到剪贴板

<!–css–>   
<style type="text/css">   
    *{margin: 0;padding: 0;}   
    header, footer {background: sandybrown;height: 50px;}   
    section {display: flex;align-items: flex-start;height: 500px;}   
    article {order: 1;flex: 3;align-self: stretch;background: wheat;}   
    aside {flex: 1;background: seashell;height: 100px;}   
    section.sidebar {order: 2;flex: 1;height: 100px;background: seashell;}   
</style>   
  
<!–html–>   
<header></header>   
<section>   
    <article></article>   
    <aside></aside>   
    <section class="sidebar"></section>   
</section>   
<footer></footer>   
  

等高布局

真心简单。