学习了flex布局，为了测试自己对flex布局的知识掌握了多少，特此尝试着自己仿了PHP中文网手机端的首页，通过本次布局过程中遇到一些自己无法解决的问题，也让自己认识到有些知识需要需要多练多记多实战，特别是flex属性的用法和剩余空间的计算方式等知识需要多巩固。
效果图：
HTML代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/index-style.css"> <script src="https://kit.fontawesome.com/35aa61648d.js" crossorigin="anonymous"></script> <title>PHP中文网手机版首页</title> </head> <body> <!-- 顶部固定区域 --> <header> <a href=""><i class="fa fa-user-circle-o"></i></a> <a href=""><img src="static/images/logo.png" alt="PHP中文网LOGO"></a> <a href=""><i class="fa fa-bars"></i></a> </header> <!-- bannaner区域 --> <div class="banner"> <a href="" title="独孤九剑-WEB全栈开发系列课程"><img src="static/images/1.jpg" alt="独孤九剑-WEB全栈开发系列课程" srcset=""></a> </div> <!-- 导航菜单区域 --> <nav> <ul> <li> <a href=""> <img src="static/images/html.png" alt=""> <span>HTML/CSS</span> </a> </li> <li> <a href=""> <img src="static/images/JavaScript.png" alt=""> <span>JavaScript</span> </a> </li> <li> <a href=""> <img src="static/images/code.png" alt=""> <span>服务端</span> </a> </li> <li> <a href=""> <img src="static/images/sql.png" alt=""> <span>数据库</span> </a> </li> </ul> <ul> <li> <a href=""><img src="static/images/app.png" alt=""> <span>移动端</span> </a> </li> <li> <a href=""> <img src="static/images/manual.png" alt=""> <span>手册</span> </a> </li> <li> <a href=""><img src="static/images/tool2.png" alt=""> <span>工具</span> </a> </li> <li> <a href=""> <img src="static/images/live.png" alt=""> <span>直播</span> </a> </li> </ul> </nav> <!-- 主体部分 --> <main class="main"> <article class="recommended"> <h3>推荐课程</h3> <section> <a href="http://"><img src="static/images/tianlongbabu.jpg" alt=""> </a> <a href="http://"><img src="static/images/tianlongbabu.jpg" alt=""> </a> </section> <section> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> </section> </article> <article class="recommended"> <h3>最近更新</h3> <section> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> <div> <a href=""><img src="static/images/cl.jpg" alt=""></a> <span> <a href="">CI框架30分钟极速入门</a> <span><i>初级</i>52983</span> </span> </div> </section> </article> <article class="recommended"> <h3>最新文章</h3> <section> <div> <a href="""><img src=" static/images/cl.jpg" alt=""></a> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <a href="""><img src=" static/images/cl.jpg" alt=""></a> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <a href="""><img src=" static/images/cl.jpg" alt=""></a> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <a href="""><img src=" static/images/cl.jpg" alt=""></a> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <a href="""><img src=" static/images/cl.jpg" alt=""></a> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div id="more"> <span> 更多内容 </span> </div> </section> </article> <article class="recommended"> <h3>最新博文</h3> <section> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div id="more"> <span> 更多内容 </span> </div> </section> </article> <article class="recommended"> <h3>最新问答</h3> <section> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div> <span class="order"> <a href="">重启阿里云ECS服务器实例</a> <span>发布时间：2019-11-07</span> </span> </div> <div id="more"> <span> 更多内容 </span> </div> </section> </article> </main> <!-- 页脚部分 --> <footer> <a href=""> <i class="fa fa-home"></i> <span>首页</span></a> <a href=""> <i class="fa fa-video-camera"></i> <span>视频</span></a> <a href=""> <i class="fa fa-code"></i> <span>社区</span></a> <a href=""> <i class="fa fa-user"></i> <span>我的</span></a> </footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码：
实例
* {
margin: 0;
padding: 0;
/* outline: 1px dashed #ff742d; */
}
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #1f1f1f ;
overflow: initial;
position: relative;
color: #aaa;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
a {
text-decoration: none;
color: #aaa;
}
img {
width: 100%;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
header {
width: 100%;
height: 44px;
background: #282828;
border-bottom: 1px solid #363636;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 5px;
position: fixed;
top: 0;
}
header > a > img {
width: 94px;
}
header > a > i {
font-size: 24px;
}
.banner {
display: flex;
}
nav {
background: #282828;
display: flex;
/*主轴为垂直方向, 禁止换行*/
flex-flow: column nowrap;
}
/*图片默认大小*/
nav img {
width: 45px;
height: 49px;
}
/*每一行导航都应该是一个弹性容器以方便布局*/
nav > ul {
display: flex;
/*每个菜单项水平且不换行*/
flex-flow: row nowrap;
}
/*每一菜单项均分全部空间*/
nav ul li {
flex: 1;
}
/*图片与文本应该做为一个组件,统一设置*/
nav ul li a {
display: flex;
/*图片, 链接文本垂直排列*/
flex-flow: column wrap;
/*交叉轴上居中显示*/
align-items: center;
/*外边距可以使菜单项之间不太拥挤*/
margin: 10px;
}
/*菜单项文本与上面图标有一个间隙*/
nav ul li a span {
margin-top: 5px;
}
/* 主体部分 */
.main {
display: flex;
flex-flow: column nowrap;
}
.main > .recommended {
padding: 5px;
}
.main > .recommended >h3 {
margin: 0 0 10px 5px;
}
.main > .recommended > section:first-of-type {
display: flex;
flex-flow: row nowrap;
}
.main > .recommended > section:first-of-type >a {
margin: 5px;
}
.main > .recommended > section:first-of-type >a >img {
height: 90px;
}
.main > .recommended > section:last-of-type {
display: flex;
flex-flow: column nowrap;
}
.main > .recommended > section:last-of-type > div {
display: flex;
margin: 10px 5px;
background: #282828;
padding: 10px;
}
.main > .recommended > section:last-of-type > div > a {
flex: 1;
}
.main > .recommended > section:last-of-type > div > a >img {
height: 74px;
}
.main > .recommended > section:last-of-type > div > span {
display: flex;
flex: 1;
flex-flow: column nowrap;
margin-left: 10px;
}
.main > .recommended > section:last-of-type > div > span > a {
margin-bottom: 20px;
font-size: 1rem;
}
.main > .recommended > section:last-of-type > div > span i {
font-style: normal;
background-color: #909090;
color: white;
border-radius: 4px;
padding: 0 5px;
margin-right: 5px;
font-size: smaller;
}
/* 改变图片顺序 */
.order {
order: -1;
}
/* 改变图片大小 */
.img-size {
width: 100px;
}
.flex {
flex: none;
}
#more >span {
display: flex;
align-items: center;
color: #aaa
}
footer {
height: 50px;
width: 100%;
background: #282828;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
box-sizing: border-box;
bottom: 0;
left: 0;
border-top: #363636;
}
footer > a {
height: 50px;
display: flex;
flex-flow: column nowrap;
align-items: center;
flex: 1;
padding: 5px;
border-right: 1px solid #363636;
box-sizing: border-box;
}
footer > a:last-of-type {
border-right: none;
}
footer > a:hover {
background: #3E3E3E;
}
footer > a > i {
margin-bottom: 5px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
总结
1.布局手机网页布局的最大宽度建议在768px，
2.在布局导航菜单过程中可以使用flex-flow: row wrap将弹性元素设置在水平排列且换行，同时还可以使用flex-flow: column nowrap;属性来将弹性元素进行上下排列。
3.想让导航菜单弹性元素在垂直轴上居中对齐，应该使用align-items: center属性来对齐
4.为了方便样式表的维护，我们通过定义一个专用于页面公共样式的样式表文件，通过导入的方式应用它@import “style.css”;
5.本次布局遇到一个布局问题没能自己解决，自己通过举一反三方式，让<a>元素想让弹性元素在一行排列且每次换行在弹性容器中的起始位置进行从左到右的方式排列，这一问题经过多个属性的测试之后未能得到解决。
6.在布局页面头部和页脚也遇到了问题，就是当父元素做了固定定位后，子元素的宽度变小，经过测试给父元素的宽度设置width:100%可以得到解决，同时在公共样式中尽量不要使用分组选择器给元素设置相同的定位，那样会影响自己布局工作。
7.对于flex的属性的知识有待加强，在为弹性元素设置flex: 1;之后自己一时还不知道如何利用其他的flex属性来覆盖它的样式。
