flex布局，也叫弹性布局，与浮动布局相比，flex布局更加的简单，更加有效。
在页面中，有两根轴，从页面的左上角向右是主轴，从页面的左上角向下是交叉轴
容器的定义：就是一个装有小盒子的大盒子
项目的定义：即被布局的小盒子
容器与项目之间是父子元素的关系，并且这种布局只会存在于父子之间
flex简单例子
首先创建一个如图所示的盒子和对应的css样式
<div class="nav">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<style>
*{margin:0;padding: 0;}
.nav{
margin: 100px auto;
width: 500px;
height: 50px;
border: 3px red solid;
display: flex;
}
.box1{
width: 130px;
height: 50px;
background-color: skyblue;
}
.box2{
width: 100px;
height: 50px;
background-color: orange;
}
.box3{
width: 150px;
height: 50px;
background-color: seagreen;
}
</style>
注意，在父元素的css样式中写入display:flex可开启flex布局. 结果如下图所示
flex的一些属性
容器相关的属性(写在父元素的样式中)：
1. flex-direction 改变主轴方向 row（默认值，从左到右）
column（从上到下）
row-reverse（从右向左）
column-reverse （从下到上）
2. flex-wrap 项目撑满主轴时，是否换行 wrap（换行）
nowrap（默认值，不换行）
3. justify-content 处理富余空间 flex-start（与主轴起点对齐）
flex-end（与主轴末端对齐）
center（居中）
space-between（主轴两端对齐，中间平均分配）
space-around（平均分配）
4. align-items: 定义项目在交叉轴上如何对齐 flex-start
flex-end
center
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整容器的高度。
5. align-content 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间，与justify-content类似
项目相关的属性（写在子元素的项目中）：
1. order 用来定义项目的排列顺序。数值越小，排列越靠前，默认为0.
2. flex-grow 设置某个子元素的放大比例。默认值为0，即不放大。
3. flex-shrink 设置某个子元素的缩小比例。默认值为1，即在空间不足时，会缩小。若设置为0，则不会缩小。
flex-grow与flex-shrink二者一个放大一个缩小，但用法类似。flex-grow可同时给多个项目设置，若都设置为1，则他们将等分剩余空间，若在三个子元素中，一个设置为2，另外两个设置为1，则前者占据的剩余空间将比后者多一倍。
4.flex-basis 项目在在分配多于空间之前，在主轴上占据的大小，可用像素值或auto直接设置
5.align-self 单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式，属性值为
auto | flex-start | flex-end | center | baseline | stretch
与align-items属性值用法一样
另外，flex还有两个简写形式的属性，分别为
1. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap
2. flex属性：是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后面两个属性可选
