FlexibleBox，简称Flex，是一种更加灵活高效的网页布局方式。
Flex灵活性可以应用于任何HTML元素。内联元素和块级元素以不同的方式使用灵活的布局，如下面的代码片段所示。
//块级元素应用
divclass=flexiblebox/div
.flexiblebox{
display:flex;
}
//行内元素应用
pclass=flexibleline/p
.flexibleline{
display:inline-flex;
}
一旦元素应用了灵活布局，该元素将成为Flex容器（container），其子元素将成为Flex容器的项（子项）。Flex容器及其子容器都可以添加一些布局属性来调整Flex容器内子代的布局。
对于Flex容器，其布局应用于两个参考轴：主轴（mian轴）和垂直于主轴的交叉轴（交叉轴）。主轴可以是水平的或垂直的，交叉轴总是垂直于主轴。
总结：通过设置Flex容器及其子项的布局属性来调整Flex容器的内部布局。
Flex容器属性：主要控制项目沿主轴和交叉轴的布局。
flex-direction：控制主轴方向和主轴方向的元素从头到尾，或者从尾到尾（row,column,row-reverse,column-reverse）
flex-wrap:控制是否换行，以及换行后的行顺序。(nowrap,wrap,wrap-reverse)
flex-flow：包含两个属性，flex-direction和flex-wrap，第一个属性是flex-direction
justify-content：控制主轴方向的items结盟。
align-items：控制项目在横轴上的对齐方式。
align-content：多轴情况下控制item的对齐方式。
下面代码段展示了justify-content、align-items、align-content多个属性值的作用:
divclass=flexible-block/div
.flexible-block{
display:flex;
flex-flow:rowwrap;
justify-content:center;//在主轴方向居中向两边排列
/*justify-content:flex-start;从主轴正方向排列，正方向受flex-direction影响*/
/*justify-content:flex-end;从主轴反方向排列*/
/*justify-content:space-between;从主轴两端开始向中间排列，且item间隔一致*/
/*justify-content:space-around;从主轴留白开始向中间排列，且item间隔与留白一致*/
align-items:center;//交叉轴的中点对齐
/*align-items:flex-start;从交叉轴正方向对齐，正方向受flex-direction影响*/
/*align-items:flex-end;从交叉轴反方向对齐*/
/*align-items:stretch;交叉轴方向上拉伸对齐*/
/*align-items:baseline;item的第一行文字的基线对齐*/
align-content:center;//与交叉轴的中点对齐
/*align-content:flex-start;与交叉轴的起点对齐*/
/*align-content:flex-end;与交叉轴的终点对齐*/
/*align-content:stretch;轴线占满整个交叉轴*/
/*align-content:space-between;与交叉轴两端对齐，轴线之间的间隔平均分布*/
/*align-content:space-around;每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
}
Flex项目属性：定义自己的排列顺序，在横轴上对齐，以及每个项目在剩余空间或空间不足时的适应。可以设置以下属性
order：主轴上项目的顺序，整数，较小的在前面。
flex-grow：数字类型，默认值为0，剩余主轴空间与其他项的属性值按比例分配。为0时，不分配。
flex-shrink：数字类型，默认值为1，与其他项的属性值成比例，自身收缩以适应主轴空间。为0时不收缩。
flex-basis：输入值类型与宽度一致。表示项目在主轴方向上占用多少空间。
flex:flex-growflex-shrinkflex-basis;默认值为01auto，flex为auto时为11auto，flex为auto时为00auto。
align-self：可以设置与横轴对齐无关，输入值与align-items一致。
弹性布局优缺点
优点：布局灵活，代码简单，在实现复杂布局和自适应布局时效率更高，以后代码的可维护性也比较强。缺点：以前很多人说兼容性不好，现在IE10以下浏览器的市场份额越来越低，完全不用担心兼容性问题。浏览器支持列表如下。我不得不说一个缺点，应该是前端必须学习一种新的布局方法。
全新超实用性的Python零基础入门到就业体验课+视频+源码淘宝￥2购买已下架