首先说明,本文参照阮一峰博客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 */
}