FLEX布局

FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；(父级)
Flex项目：采用 Flex 布局的元素的父元素的子元素；（子级）
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flexbox布局功能主要具有以下几点：
1.屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2.指定伸缩项目沿着主轴或者侧轴按比例分配额外空间，从而调增伸缩项目的大小
3.指定伸缩项目沿主轴/侧轴将伸缩容器额外空间，分配到伸缩项目之前，之后，或之间
4.指定如何将垂直与元素布局轴的额外空间分不到该元素的周围
5.控制元素在页面上的布局方向
6.按照不同于标准流所指定的排列方式对屏幕上的元素重新排序
flex容器属性
1.display:flex、inline-flex设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2.flex-direction属性 决定主轴的方向（即项目的排列方向）值row从左向右 | row-reverse与row相反 | column从上到下 | column-reverse;与column相反
3.flex-wrap属性，定义子元素是否换行显示 值nowrap不换行 ， wrap换行
flex项目属性
flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
详细属性值：
缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

flex布局案例

header，footer固定，中间弹性，left、right固定，center弹性
css样式：
{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.demo{
width: 100%;
height: 100%;
display: flex;/ 设为 Flex 布局 /
flex-direction: column;/ 决定主轴的方向（即盒子的排列方向） /
}
header{
width: 100%;
height: 100px;
background-color: red;
}
section{
flex: 1;/ 分配空间 /
display: flex;/ 设为 Flex 布局 /
background-color: green;
}
aside{
width: 200px;
height: 100%;
background-color: blue;
}
main{
flex: 1;/ 分配空间 */
background-color: pink;
}
article{
width: 200px;
height: 100%;
background-color: blue;
}
footer{
width: 100%;
height: 100px;
background-color: yellow;
}
HTML：