CSS中的Flex布局--移动端开发常用布局
致谢：
学习链接：H5+CSS3+Flex布局
布局原理：
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
任何一个容器都可以被指定为flex布局任何一个容器都可以指定为flex布局
1、父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
2、伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
常见的父元素属性：
flex-direction 设置主轴方向
justify-content 设置主轴上的子元素排列方式
flex-wrap 设置子元素是否换行
align-content 设置侧轴上的子元素的排列方式（多行）
align-items 设置侧轴上的子元素排列方式（单行）
flex-flow 复合属性，同时设置flex-direction和flex-wrap
主轴和侧轴，
默认主轴方向是x轴方向，水平向右
默认侧周方向是y轴方向，竖直向下
元素跟着主轴来排列
flex-direction
row 默认x轴
row-reverse
column
column-reverse
justify-content
flex-start 默认，从头部开始
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间
flex-wrap
默认在一行显示，不换行，装不下，会缩小子元素宽度，放到父元素中
nowrap 默认不换行
wrap 换行
align-items
控制子元素在侧轴的排列方式。。控制侧轴上的排列方式
flex-start 默认，从头部开始
flex-end 从尾部开始排列
center 在主轴居中对齐
stretch 拉伸
align-content
侧轴上的排列方式并且只能用于子项出现换行的情况（多行，设置flex-wrap: wrap）
前提设置flex-wrap: wrap; 换行
flex-start
flex-end
center 居中
space-around
space-between
stretch 拉伸
flex-flow
设置flex-direction和flex-wrap复合属性
column wrap;
column nowrap;
row wrap;
row nowrap;
常见的flex布局子项属性
flex 份数，
定义子项目分配剩余空间，用flex设置占多少份
align-self
控制单个项目在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。
order
定义项目的排列数据。数值越小，位置越靠前，默认为0。与z-index不同
flex子项份数示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
width: 60%;
height: 60%;
margin: 0 auto;
background-color: pink;
display: flex;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
section div:nth-child(2){
flex: 1;
background-color: green;
}
p {
display: flex;
width: 60%;
height: 150px;
margin: 100px auto;
background-color: green;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: aqua;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
效果图：
