一、分栏布局
1.设置栏数（最大栏数）
语法：column-count:数值;
2、设置每栏的宽度（最小宽度）
语法：column-width:数值+单位;
注：设置每栏的最小宽度，当屏幕缩小的时候，当每栏宽度小于最小栏数的时候，就不允许再小，所以这个 时候，它就会减少栏数。
但是 当屏幕足够大的时候，他会增加栏数；当设置最大栏数的时候，他会给每栏增加宽度，而不会增加栏数。
3、设置栏间距
语法：column-gap:数值+单位;
注：当给多的时候，他会改变栏数。
4、设置栏分隔线
语法：column-rule: 3px solid|dashed|dotted|double red;
实线|虚线|双线
5.设置是否跨栏显示
语法：column-span:none(默认值)|all(跨栏显示);
注：该属性给需要跨栏显示的元素设置。
注：瀑布流的实现（纯css）
二、弹性布局
注：也可以叫flex布局。
语法：display: flex;
注：给父元素设置display: flex;，子元素 就变成块元素了。
说明：
I.给元素设置了display:flex;就成为了弹性盒
II.父元素设置flex后，子元素的float（浮动）,clear（清除浮动）,vertical-align将会失效
III.我们把设置了flex的父元素称之为Flex容器，把子元素称之为 Flex项目
IV.当设置了flex布局后，会产生两根轴线：主轴和交叉轴（侧轴）
1、Flex容器属性
1）设置主轴的方向（flex项目排列的方向）
语法：flex-direction: row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿
注：设置了display:flex; 之后就算内容超出容器也不会换行显示，之后超出容器 继续展示。
设置了那个属性，那个属性所对应的 就是主轴。
2)设置flex项目单行或多行显示
语法：flex-wrap: nowrap|wrap|wrap-reverse;
nowrap 不换行，flex项目在一行显示（默认值）
wrap flex项目多行显示
wrap-reverse flex项目多行显示，行的顺序是倒过来的
3)flex-direction和flex-wrap的简写方式
语法：flex-flow:row nowrap; (默认值)
4)设置主轴对齐方式
语法：justify-content: flex-start|flex-end|center|space-between|space-around;
flex-start 对齐主轴的起点
flex-end 对齐主轴的终点
center 居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等
5)设置交叉轴对齐方式
语法：align-items: flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度
使用flex布局的方式实现未知大小的元素在屏幕窗口水平垂直都居中：
html,body{
/*让html和body的高度为屏幕窗口的高度(窗口高度自适应)*/
height:100%;
}
body{
display:flex;
justify-content:center;
align-items:center;
}
使用flex布局的方式实现未知大小的子元素在父元素中水平垂直都居中
父元素 {
display: flex;
justify-content: center;
align-items: center;
}
6)设置多根轴线对齐方式
注：只有在多行的时候，才会生效。
语法：align-content: flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考居中对齐
space-between 交叉轴两端对齐，轴线之间的间隔平均分布(第一行 对齐起点，最后 一行对其终点，中间间隔相等)
space-around Flex项目（沿交叉轴方向）之间的间隔相等
stretch flex项目没有设置高度或为auto，占满整个父元素的高度（这个是在多行的时候，并且没有设置高度，他会根据多行 去占满元素）
2、Flex项目属性
注：Flex项目属性 是给子元素加的。
1）设置flex项目排列顺序
语法：order: 整数值;
注：值越小越靠前（用它可以改变Flex的项目顺序）。
2）设置flex项目单独的交叉轴对齐方式
语法：align-self: flex-start|flex-end|center|baseline|stretch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 600px;
background: pink;
/* 给父元素设置display:flex;，子元素 就变成块元素了 */
display: flex;
justify-content: space-around;
align-items: center;
}
p {
display: block;
height: 30px;
width: 60px;
text-align: center;
line-height: 30px;
border: 1px solid black;
}
div p:nth-child(1){
/* 希望它对其交叉轴的起点 */
align-self: flex-start;
}
div p:nth-child(2){
/* 这个 其实不用写 */
align-self: center;
}
div p:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div>
<p>一</p>
<p>二</p>
<p>三</p>
</div>
</body>
</html>
3）设置flex项目的放大比例
语法：flex-grow: 0|1|数值;
0 默认值，不放大
1 放大（1以上的 就是放大，写多少 他就是放大的比例）。
注：它可以等比例 放大（最后都会根据比例 去占满夫元素的 剩余空间）。
flex-grow默认值为0,即使父元素存在剩余空间也不放大
flex-grow值为1时，flex项目等比例放大
4）设置flex项目的缩小比例
语法：flex-shrink: 0|1|数值;
注：flex-shrink默认值为1，当父元素空间不足时，flex项目等比例缩小
flex-shrink值为0时，flex项目不缩小，并且仍然在一行显示
5)设置flex项目占据主轴的空间
语法：flex-basis: auto | 数值 | 百分比;
6）flex-grow（放大）,flex-shrink（缩小）,flex-basis（主轴占据空间）的简写方式
语法：flex:0 1 auto; (默认值)
注：flex:1; <=> flex:1 1 0%;
应用一：实现了flex项目等比例分配空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应用一：实现了flex项目等比例分配空间</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width:100%;
height: 200px;
background:black;
display: flex;
}
.box{
/* 下面是等比例空间 */
/*
flex-basis:0%;
flex-grow: 1;
flex-shrink: 1;
*/
/* 这个 也是简写 */
/* flex:1 1 0%; */
flex:1;
}
.box:nth-child(1){
background: cornflowerblue;
}
.box:nth-child(2){
background: cyan;
}
.box:nth-child(3){
background: darksalmon;
}
</style>
</head>
<body>
<div>
<!-- 他们三 均分父 -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
应用二：实现了分配剩余空间给某个flex项目(这个也叫双飞翼布局)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 300px;
background: gray;
display: flex;
}
.leftDiv {
width: 100px;
background: red;
}
.rightDiv {
width: 100px;
background: blue;
}
.cenDiv {
background: green;
/*flex-basis: 0%;
flex-grow: 1;
flex-shrink: 1;*/
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="leftDiv"></div>
<div class="cenDiv"></div>
<div class="rightDiv"></div>
</div>
</body>
</html>
