›# 从传统布局到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;
}