Sticky Footer
当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方;
![](https://i-blog.csdnimg.cn/blog_migrate/cfa577b7f006a292309faad377074f74.png)
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header{
background: rgba(0,0,0,.1);
}
article {
flex: auto;
}
footer{
background: rgba(0,0,0,.1);
height: 50px;
}
</style>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
Fixed-Width Sidebar
在上-中-下布局的基础上,加了左侧定宽 sidebar。
![](https://i-blog.csdnimg.cn/blog_migrate/75dbb85eaa38f7452576faabc1db3841.png)
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
header{
background: rgba(0,0,0,.1);
}
aside{
background: rgba(0,0,0,.2);
}
article {
flex: auto;
/* height: 1400px; */
}
footer{
background: rgba(0,0,0,.1);
}
</style>
<header>HEADER</header>
<div class="content">
<aside>ASIDE</aside>
<article>CONTENT</article>
</div>
<footer>FOOTER</footer>
Sidebar
左边是定宽 sidebar,右边是上-中-下布局。
![](https://i-blog.csdnimg.cn/blog_migrate/3aad6075dd3f040a5497231aa877e856.png)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
background: rgba(0, 0, 0, .2);
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
background: rgba(0, 0, 0, .1);
}
</style>
<aside>ASIDE</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
Sticky Sidebar
左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。左右两侧滚动条互相独立。
![](https://i-blog.csdnimg.cn/blog_migrate/a38adc24c48757cfab32b002018a1699.png)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
overflow-y: auto;
display: block;
background: rgba(0, 0, 0, .2);
}
aside p{
height: 350px;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content article {
flex: auto;
background: rgba(0, 0, 0, .1);
}
</style>
<aside>
ASIDE
<p>item</p>
<p>item</p>
<p>item</p>
</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
flex属性
flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex 的默认值是 0 1 auto。
- flex-grow -----用来“瓜分”父项的“剩余空间”。
![](https://i-blog.csdnimg.cn/blog_migrate/eea5cabdf2c6c677ba329b6d77d5a06c.jpeg)
容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px,子项2占用的基础空间是70px,子项3占用基础空间是100px,剩余空间为 400-50-70-100 = 180px。
其中子项1的flex-grow: 0(未设置默认为0), 子项2flex-grow: 2,子项3flex-grow: 1,剩余空间分成3份,子项2占2份(120px),子项3占1份(60px)。
所以 子项1真实的占用空间为: 50+0 = 50px, 子项2真实的占用空间为: 70+120 = 190px, 子项3真实的占用空间为: 100+60 = 160px。
- flex-shrink ----用来“吸收”超出的空间
![](https://i-blog.csdnimg.cn/blog_migrate/90da2d5dae08a7ac801988b3c326c7d6.jpeg)
容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px,子项2占用的基准空间是150px,子项3占用基准空间是100px,总基准空间为 250+150+100=500px。
容器放不下,多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1), 子项2 flex-shrink: 2,子项3 flex-shrink: 2。
子项1需要吸收的的空间为 (2501)/(2501+1502+1002) * 100 = 33.33px,子项1真实的空间为 250-33.33 = 216.67px。
同理子项2吸收的空间为(1502)/(2501+1502+1002) * 100=40px,子项2真实空间为 150-40 = 110px。
子项3吸收的空间为(1002)/(2501+1502+1002) * 100 = 26.67px,真实的空间为100-26.67=73.33px。
- flex-basis
flex-basis 用于设置子项的占用空间。如果设置了值,则子项占用的空间为设置的值;如果没设置或者为 auto,那子项的空间为width/height 的值。
当 flex 取值为 none,则计算值为 0 0 auto
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
当 flex 取值为 auto,则计算值为 1 1 auto
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
扩展:
基本网格布局
最简单的网格布局,就是平均分布。
![](https://i-blog.csdnimg.cn/blog_migrate/3a67cb61027eb13c04a25642075979c2.png)
这里最关键的就是flex:1使得各个子元素可以等比伸缩
<div class="Grid">
<div class="Grid-cell">1/2</div>
<div class="Grid-cell">1/2</div>
</div>
<div class="Grid">
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
</div>
<style>
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
background: #eee;
margin: 10px;
}
</style>
百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
![](https://i-blog.csdnimg.cn/blog_migrate/466ae3e0c9e39792e155ed2e8be6953f.png)
这里最关键的是通过flex的第三个属性,也就是flex-basis来定义元素占据的空间。
<div class="Grid">
<div class="Grid-cell col2">50%</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell ">auto</div>
</div>
<div class="Grid">
<div class="Grid-cell">auto</div>
<div class="Grid-cell col2">50%</div>
<div class="Grid-cell clo3">1/3</div>
</div>
<style>
.col2 {
flex: 0 0 50%;
}
.col3 {
flex: 0 0 33.3%;
}
</style>