三、弹性布局
1.多栏布局
概念：实现多个栏目的布局，类似于报纸
| 示意图 |
|---|
 |
a) 分栏显示–语法：column-count:值
取值：值是一个栏目的数量
<style type="text/css">
.box{column-count:3;width:500px;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。
截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
| 效果 |
|---|
 |
b) 多栏隔断框–语法：column-rule:值
取值：这里的取值和边框的取值是一样的，也有边框厚度，边框颜色，边框样式
<style type="text/css">
.box{column-rule:5px solid red;column-count:3;width:500px;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。
截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
| 效果 |
|---|
 |
c) 设置每一栏的宽度–语法：column-width:值
取值：值和宽度的值一样
<style type="text/css">
.box{column-width:80px;width:500px;border:1px solid red;}
</style>
</head>
<body>
<div class="box">
本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。
为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。
截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
</div>
</body>
| 效果 |
|---|
 |
2.弹性布局
概念：可以实现类似浮动的效果，但是不会脱离文档流
语法：display:flex -------------设置一个弹性容器
主要属性（都需要先设置display:flex;）：
a) 设置弹性布局的方向–语法：flex-direction:值
取值：
（1）row横向排列，等同于左浮动浮动效果
| 示意图 |
|---|
 |
（2）row-reverse 横向反向排列，等同于右浮动的效果
| 示意图 |
|---|
 |
（3）column 纵向排列
| 示意图 |
|---|
 |
（4）column-reverse 纵向反向排列，从下到上的排列
| 示意图 |
|---|
 |
b) 设置 弹性布局是否换行，语法：flex-wrap:值
取值：
（1）不换行（默认），nowrap
| 示意图 |
|---|
 |
（2）换行， wrap
| 示意图 |
|---|
 |
（3）换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列
| 示意图 |
|---|
 |
c) 设置弹性布局的水平对齐方式，语法：justify-content:值
取值：
（1）从左向右（左对齐），默认，flex-start
| 示意图 |
|---|
 |
（2）从右往左排列（右对齐），flex-end
| 示意图 |
|---|
 |
（3）两端对齐，中间等距离隔开，space-between
| 示意图 |
|---|
 |
（4）两端的空白是中间空白的一半，space-around------------环绕对齐
| 示意图 |
|---|
 |
（5）居中对齐，center
| 示意图 |
|---|
 |
（6）等距离排列，space-evenly
| 示意图 |
|---|
 |
d) 垂直对齐方式，语法：align-content:值（在换行的时候用）
取值：
（1）默认的排列方式，stretch--------靠上排列，但是元素之间有间距
| 示意图 |
|---|
 |
（2）靠上排列（上对齐），flex-start
| 示意图 |
|---|
 |
（3）靠下排列（下对齐），flex-end
| 示意图 |
|---|
 |
（4）垂直上下两端对齐，中间等距离空白，space-between
| 示意图 |
|---|
 |
（5） 两端的空白是中间的空白的一半，space-around
| 示意图 |
|---|
 |
（6）居中对齐，center
| 示意图 |
|---|
 |
（7）等距离摆放，space-evenly
| 示意图 |
|---|
 |
e) 交叉对齐方式，语法：align-items:值 ，需要横向排列
取值：
（1）flex-start，从起始位置对齐
| 示意图 |
|---|
 |
（2）flex-end，在结束位置对齐--------底部对齐
| 示意图 |
|---|
 |
（3）center，居中对齐---------垂直居中
| 示意图 |
|---|
 |
（4）baseline，在基准线对齐
| 示意图 |
|---|
 |
（5）stretch，拉伸子元素------图片不行
| 示意图 |
|---|
 |
使用场景：当网页结构鲜明，简单，使用弹性布局
f)子元素单独在y轴上的对齐方式，语法：align-self:值
取值：
auto：默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为"stretch"
stretch：拉伸
center：居中
flex-start：最上面
flex-end：最下面
baseline：容器的基线
其实这个属性的结果和align-items的一样，只是align-items修饰的弹性容器中的所有子元素，align-self修饰的当前这一个元素。
text-align:center;和margin:auto;的区别
text-align:center;
1.文本水平居中对齐
2.设置在父元素上，作用于子元素（行元素和行内块，不能对块元素生效）
margin:auto;
1.盒子水平居中
2.设置在自身，作用于自身（自己是块元素，在父元素中居中，不能对行元素生效）
