学习总结
1、有关图片的排版布局很含糊
2、FLEX弹性布局常用属性需要进一步理解
3、当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为 为：
a、元素排列为一行 (flex-direction 属性的初始值是 row)。
b、元素从主轴的起始线开始。
c、元素不会在主维度方向拉伸，但是可以缩小。
d、元素被拉伸来填充交叉轴大小。
f、flex-basis 属性为 auto。
g、flex-wrap 属性为 nowrap。
5、在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。
6、虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。 在这样做的时候，您应该把每一行看作一个新的flex容器。 任何空间分布都将在该行上发生，而不影响该空间分布的其他行。
效果切图
代码示例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防移动商城</title> <link rel="stylesheet" href="css/font_icon.css" /> <link rel="stylesheet" href="css/myphp.css" /> </head> <body> <!-- 头部区 --> <header> <a href="">LOGO</a> <span class="iconfont"></span> </header> <!-- 轮播区 --> <div style="width: 100vw; height: 26px;"></div> <div class="slider"><img src="image/1.jpg" alt="" /></div> <!-- 导航区 --> <nav> <div> <a href=""><img src="image/link1.webp" alt="" /></a> <a href="">HTML/CSS</a> </div> <div> <a href=""><img src="image/link2.webp" alt="" /></a> <a href="">JavaScript</a> </div> <div> <a href=""><img src="image/link3.webp" alt="" /></a> <a href="">服务端</a> </div> <div> <a href=""><img src="image/link4.webp" alt="" /></a> <a href="">数据库</a> </div> <div> <a href=""><img src="image/link1.webp" alt="" /></a> <a href="">移动端</a> </div> <div> <a href=""><img src="image/link2.webp" alt="" /></a> <a href="">手册</a> </div> <div> <a href=""><img src="image/link3.webp" alt="" /></a> <a href="">工具</a> </div> <div> <a href=""><img src="image/link4.webp" alt="" /></a> <a href="">直播</a> </div> </nav> <!-- 推荐课程 --> <h3>推荐课程</h3> <div class="tuijian"> <a href=""><img src="image/tianlong2.jpg" alt="" /></a> <a href=""> <img src="image/tianlong2.jpg" alt="" /></a> </div> <div class="tj2"> <a href=""><img src="image/tianlong3.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <div class="tj2"> <a href=""><img src="image/tianlong4.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <div class="tj2"> <a href=""><img src="image/tianlong2.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <!-- 最新更新 --> <h3>最新更新</h3> <div class="tj2"> <a href=""><img src="image/tianlong3.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <div class="tj2"> <a href=""><img src="image/tianlong4.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <div class="tj2"> <a href=""><img src="image/tianlong2.jpg" alt="" /></a> <div> <h4>CI框架30分钟极速入门</h4> <span class="iconfont"></span> <span>61258次播放</span> </div> </div> <!-- 最新文章 --> <!-- 最瓣博文 --> <!-- 最新回答 --> <!-- 页脚 --> <div style="width: 100vw; height: 85px;"></div> <footer> <a href="" ><span class="iconfont"></span> <span>首页</span> </a> <a href="" ><span class="iconfont"></span> <span>视频</span> </a> <a href="" ><span class="iconfont"></span> <span>社区</span> </a> <a href="" ><span class="iconfont"></span> <span>我的</span> </a> </footer> </body></html>
* { margin: 0px; padding: 0px;}a { text-decoration: none; color: #666;}html { width: 100vw; height: 100vh; /* background-color: #888; */ font-size: 14px;}body { min-width: 360px; max-width: 780px; /* width: 360px; */ background-color: #cecece; display: flex; flex-flow: column nowrap;}body > header { background-color: #333; color: white; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; position: fixed; width: 96vw;}body > .slider { /* height: 146px; */}body > .slider > img { width: 100vw;}nav { background-color: white; padding-top: 15px; /* height: 18vh; */ display: flex; flex-flow: row wrap;}nav > div { width: 25vw; display: flex; flex-flow: column nowrap; align-items: center;}nav > div > a:first-of-type { text-align: center;}nav > div img { width: 25%;}h3 { padding-left: 12px; /* background-color: #b8cad4; */ width: 100vw; color: #666;}.tuijian { /* padding-left: 12px; */ width: 100vw; display: flex; flex-flow: row nowrap; justify-content: space-around;}.tuijian > a > img { width: 100%;}.tuijian > a:first-child { margin-left: 12px; /* width: 168px; */}.tuijian > a:last-child { margin-left: 6px; /* width: 168px; */}.tj2 { margin: 15px 0 0 0px; width: 100%; background-color: white; display: flex; flex-flow: row nowrap;}.tj2 > a { margin: 6px 0px 0px 12px; width: 36vw;}.tj2 > a > img { width: 100%;}.tj2 > div { margin-left: 12px; margin-top: 15px; color: #666; flex-flow: row;}.tj2 > div > span { margin-top: 30px;}footer { width: 100vw; height: 55px; color: #666; background-color: #efefef; border-top: 1px solid #ccc; position: fixed; bottom: 0; display: flex; justify-content: space-around;}body > footer > a { margin-top: 10px; font-size: 0.8rem; display: flex; flex-flow: column nowrap; align-items: center;}body > footer > a > span:first-of-type { font-size: 1.6rem;}
