弹性盒模型：多用于移动端布局，弹性盒中float、clear不生效
父元素上的属性：开启弹性盒模型 display：flex； 子元素默认水平排列
设置弹性盒方向 flex-direction: ；
row：默认值 子元素水平排列
column：子元素垂直排列
row-reverse：子元素水平方向倒序排列
colum-reverse：子元素垂直方向上倒序排列
设置子元素在主轴的对齐方式 ：
默认，x轴是主轴，y是侧轴
当flex-direction：column； y轴为主轴，x轴为侧轴
justify-content：；
flex-start 默认值 弹性盒的开始
flex-end 弹性盒的结果
center 居中
space-between 子元素之间平均分配父元素剩余的距离
设置子元素在侧轴的对齐方式：
align-items：；
flex-start弹性盒开始
flex-end 弹性盒的结束
center居中
- 子元素上的属性
flex-grow：number；
设置子元素宽度之间的比例，分配父元素剩下的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box
.one,.two,.three
.one
.two
.three
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
三栏布局：左侧两侧宽度规定，中间的宽度跟着浏览器的缩放而缩放。
css部分
.nav
.arrow
.search
.title
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="123.css">
</head>
<body>
<div class="nav">
<div class="arrow"></div>
<div class="title"></div>
<div class="search"></div>
</div>
</body>
</html>
