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

快来打我* 2022-05-30 03:48 208阅读 0赞

> 首先说明，本文参照阮一峰博客[Flex 布局教程：实例篇][Flex]学习。
> 
> 本文不做具体的语法解释，具体语法说明可参见[Flex 布局教程：语法篇][Flex 1]。
> 
> 本人基于学习过程，编写了极简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_case3.html]

固定底栏布局：[**https://fukaiit.github.io/Flex/flex\_layout\_case4.html**][https_fukaiit.github.io_Flex_flex_layout_case4.html]

上文其它布局：[**https://fukaiit.github.io/Flex/flex\_layout\_case2.html**][https_fukaiit.github.io_Flex_flex_layout_case2.html]

### 3. 兼容性问题 ###

[IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1][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. 预览效果 ###

![20180304170647576][]

![20180304170621439][]

![20180304170548560][]

[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[Flex 1]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Github]: https://github.com/fukaiit/Flex
[https_fukaiit.github.io_Flex_flex_layout_case3.html]: 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_case4.html
[https_fukaiit.github.io_Flex_flex_layout_case2.html]: https://fukaiit.github.io/Flex/flex_layout_case2.html
[IE 11 flex_ ---- _min-height _flex_1]: https://www.cnblogs.com/SamWeb/p/9836497.html
[20180304170647576]: /images/20220530/e89f6ddba9784c7892b28b63222cdbfc.png
[20180304170621439]: /images/20220530/e6c63b3a1f32406ca85718265067ed58.png
[20180304170548560]: /images/20220530/5635cf83f61b4d0aba35fc44bc71c4ec.png