定义—— flexbox（伸缩盒布局），需要在一个父级元素上使用display属性的值：flex或inline-flex。这个父级元素将成为flex container（伸缩容器），而它的所有子元素将变成flex item（伸缩项）.
任何一个容器都可以指定为 Flex 布局
.box{
display: flex;
};
.box{
display: inline-flex;//行内元素
}
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效(绝对定位也失效)
flex布局中，父元素称为容器，子元素称为项目，容器存在两条轴：水平的主和垂直的交叉轴（侧轴）。
容器的属性：
- flex-direction
指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向
- flex-wrap
是否允许换行（默认不换行）
- flex-flow
属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content
指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向
- align-items
定义项目在交叉轴上的对齐方式
- align-content
定义了多根轴线的对齐方式。
项目的属性：
- order
定义项目的排列顺序，数值越小排列顺序越靠前，默认值为0
- flex-grow
定义项目的放大比例，默认为0（即使有剩余空间也不放大）
- flex-shrink
定义了项目的缩小比例，默认为1（会自动缩小比例）
- flex-basis
可以用来设置伸缩基准值，默认值为auto，即项目的本来大小
- flex
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（可以用flex:1表示，有剩余空间不会放大）
flex:auto 相当于flex：1 1 auto，会放大缩小
- align-self
允许单个项目有与其他项目不一样的对齐方式
flex布局的作用：能够清除浮动元素的影响，容器的margin属性不会被项目margin属性折叠。
常见的布局：
网格布局
通过为父元素设置{display:flex;}, 子元素设置{flex:1}实现自动缩放。
百分比布局
通过为所以项目设置{flex:1},然后再将某一项目设置{flex：0 0 value},其中value是百分比值，其余项目平分剩余空间。
圣杯布局
将页面分为上中下三个部分，中间部分又分为左边栏，主栏，右边栏三个部分。
html:
<body class="container">
<header>...</header>
<div class="main">
<div class='left'>...</div>
<div class='content'>...</div>
<div class='right'>...</div>
</div>
<footer>...</footer>
</body>
css:
.container{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer {
flex: 1;
}
.main{
display: flex;
flex: 1;
}
.content{
flex:1;
}
.left,.right{
flex:0 0 width;//将两栏设置成固定宽度。
}
响应式：
@media (max-width: 768px) {
.container {
flex-direction: column;
flex: 1;
}
.left,.right,.content {
flex: auto;
}
}
流式布局
关键点：
- flex-flow: row wrap;
- align-content: flex-start;
