第一题
- 布局介绍
这个是经典的首页布局，垂直方向分为头,内容,尾组成，内容又分为导航和展现，其中展现内容须要自适应，须要随着窗口的大小发生变化
- 剖析
垂直方向能够应用flex方向为column，因为两头内容项须要自适应，能够应用flex-grow指定增长自适应，内容外面又蕴含了导航和内容展现，其中内容展现是自适应，因而布局代码参考如下：
<div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div>加上款式后
<html><head><style>.container{ width: 100%; height: 100%; display: flex; flex-direction: column;}.head{ height: 80px; background-color: green; margin: 5px;}.main{ flex-grow: 1; background-color: blue; margin: 5px;}.footer{ height:80px; background-color: purple; margin: 5px;}</style></head><body><div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div></body></html>有了上中下三层，并且中间层依附flex-grow: 1可能随着高度增长增长，上和下放弃高度不变，增加nav和content款式
<html><head><style>.container{ width: 100%; height: 100%; display: flex; flex-direction: column;}.head{ height: 80px; background-color: green; margin:5px;}.main{ flex-grow: 1; display: flex; flex-direction: row;}.nav{ width: 100px; background-color: yellow; margin:5px;}.content{ flex-grow: 1; background-color: blue; margin:5px;}.footer{ height:80px; background-color: purple; margin:5px;}</style></head><body><div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div></body></html>中间层左边content会随着高度减少而减少
第二题
- 布局
- 实现
<html><head><style>.container{ width: 100%; height: 100%; display: flex; flex-direction: column;}.box{ width: 150px; background-color: orange; margin: 5px; flex-grow: 1;}</style></head><body><div class="container"> <div style="display: flex;flex-direction: row;flex-grow: 1;"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div style="display: flex;flex-direction: row;flex-grow: 1"> <div style="display: flex;flex-direction: column;"> <div class="box"></div> <div class="box"></div> </div> <div style="margin:5px;background-color: orange;flex-grow: 1;"></div> </div></div></body></html>所有元素都是响应式的