《Flex 布局教程：实例篇》学习笔记（2）——常见布局

首先说明，本文参照阮一峰博客Flex 布局教程：实例篇学习。

本文不做具体的语法解释，具体语法说明可参见Flex 布局教程：语法篇。

本人基于学习过程，编写了极简Demo，用于需要时通过开发者工具查看复制，已上传至Github。

1. 主要实例

（1）基本网格布局

（2）百分比布局

（3）圣杯布局

（4）输入框的布局

（5）悬挂式布局

（6）固定的底栏

（7）流式布局

2. 预览地址

圣杯布局：https://fukaiit.github.io/Flex/flex_layout_case3.html

固定底栏布局：https://fukaiit.github.io/Flex/flex_layout_case4.html

上文其它布局：https://fukaiit.github.io/Flex/flex_layout_case2.html

3. 兼容性问题

IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

<div class="app">
    <div class="wrapper">
        <!-- 页眉 -->
        <header>Header</header>
        <!-- 中间内容 -->
        <section class="content-wrapper">
            <side-section></side-section>
            <people class="article" />
        </section>
        <!-- 页脚 -->
        <footer>footer</footer>
    </div>
</div>

.app {
    display: flex;/* 1. 整个包裹一层，并设置flex */
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;/* 2. 增加宽度100% */
}

.content-wrapper {
    display: flex;
    flex-grow: 1;/* 3. flex:1 改变成flex-grow: 1 */
}

4. 预览效果