›# 从传统布局到Flex布局
本文将结合一个实例（其实是学校留的作业），来分析传统布局和Flex的异同。
一、任务介绍：
(1)新建一个 html 页面，并完成下图所示的布局页面
(2)尝试用 ul<li 或者 ol<li 标签完成黄色线框内 3 个土黄色色块的布局
(3)黄色矩形的圆角效果是使用了 css3 中的 border-radius 这个属性进行美化
二、分析布局
老规矩，首先分析一下图片的布局 ，分析各个色块之间的嵌套关系
如图所示：
container里包括header、main、footer三个大部分；
其中header里面包括logo色块 ；
main里面包括sider和content色块；
其中sider中包括头像色块和表格色块；
content中包括content1和content2色块。
HTML代码实现：
根据以上分析，接下来就可以用代码实现啦，依旧采用的是div标签 。
其中侧边栏sider中的黄色矩形list表单使用的是ul、li元素
代码如下：
<div class=" container ">
<div class="header ">
<div class=logo>logo
</div>
</div>
<div class="main ">
<div class="sider ">
<div class="photo"></div>
<ul class="list">
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<div class=" content ">
<div class="content1"></div>
<div class="content2"></div>
</div>
</div>
<div class="footer "></div>
四、CSS布局美化——传统盒子布局
CSS代码如下：
.container {
height: 1000px;
width: 600px;
margin: auto;
}
.header {
height: 100px;
background-color: #a6b1e1;
}
.logo {
height: 50px;
width: 80px;
background-color: #dcd6f7;
margin: 30px;
position: absolute;
text-align: center;
line-height: 50px;
}
.main {
height: 330px;
}
.sider {
width: 150px;
height: 330px;
background-color: #dcd6f7;
position: absolute;
}
.photo {
height: 60px;
width: 60px;
background-color: #a6b1e1;
margin: 30px 30px 20px 40px;
border-radius: 20px;
}
.list {
list-style: none;
border-radius: 5px;
border: 6px solid #888ebd;
/* 边框宽度6px 实线 颜色 */
}
li {
background-color: #a6b1e1;
border-bottom: 2px solid #dcd6f7;
/* 边框宽度6px 实线 颜色 */
border-radius: 2px;
width: 140px;
margin: 0 0 0 -40px;
height: 30px;
}
.last {
border-bottom: none;
}
.content {
float: right;
width: 450px;
background-color: #f4eeff;
}
.content1 {
background-color: #dcd6f7;
height: 125px;
margin: 20px;
border-radius: 5px;
border: 5px solid #888ebd;
}
.content2 {
background-color: #888ebd;
height: 125px;
margin: 20px;
border-radius: 5px;
border: 5px solid #dcd6f7;
}
.footer {
height: 70px;
background-color: #424874;
text-align: center;
line-height: 100px;
}
其中用传统的布局的方式，会到 float，绝对定位和相对定位等布局方式。
五、CSS布局与美化——Flex布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
大部分和传统布局的CSS代码相同，下面将粘贴有所改变的代码：
.container {
height: 1000px;
width: 600px;
margin: auto;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
background-color: #a6b1e1;
display: flex;
}
.logo {
height: 50px;
width: 80px;
background-color: #dcd6f7;
margin: 30px;
text-align: center;
line-height: 50px;
}
.main {
height: 330px;
display: flex;
flex-direction: row;
width: 600px;
}
.content {
width: 450px;
background-color: #f4eeff;
}
六、此页面用到的Flex布局的属性
（1）任何一个容器都可以指定为 Flex 布局。比如指定类名为container的div容器为flex布局
.container {
flex-direction: column;
}
（2）当容器Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
（3）当使用Flex布局之后，容器里面的盒子元素按照为从左到右的默认方式进行排列
如要修改排序方式：
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
七、细节优化
- 侧边栏sider中的黄色矩形list表单使用的是ul、li元素。如果不做任何美化的话就会在前面出现默认的原点，所以为了更美观就要去掉前面的点。
CSS代码：
.list {
list-style: none;
border-radius: 5px;
border: 6px solid #888ebd;
}
- 表单每一项下面都需要有下边框（最后一项没有下边框）
CSS代码：
li {
background-color: #a6b1e1;
border-bottom: 2px solid #dcd6f7;
border-radius: 2px;
width: 140px;
margin: 0 0 0 -40px;
height: 30px;
}
- 其中last为li元素的最后一个，使用border-bottom取消下边框
.last {
border-bottom: none;
}
八、效果展示
