这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【Flexbox（弹性盒布局模型）以及适用场景 】
大家好，今天给大家分享一下，Flexbox（弹性盒布局模型）以及适用场景
1.背景介绍
布局的传统解决方案，基于盒状模型，依赖display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。(ie10及以上)。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2.知识剖析
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
.box {
display: flex;
}
行内元素也可以使用Flex布局
.box {
display:inline-flex;
}
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3.常见问题 ：flex布局的兼容性
因为技术在不断的更新，有些旧的浏览器只支持旧语法的书写方式，所以就出现所谓的兼容性问题
主流的5大浏览器为Chrome，IE，Firefox，Safari，Opera，需要考虑针对这些浏览器的兼容
4.解决方案
@mixin display ($flex) {
display: -webkit-flex; /*新版本语法: Chrome 21+ */
display: -moz-flex; /*老版本语法: Firefox */
display: -ms-flex; /*混合版本语法: IE 10 */
display: -o-flex; /*老版本语法: Opera */
display: flex; /*新版本语法: Opera 12.1, Firefox 22+ */
}
5.编码实战
flex-direction属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row; /*默认值，主轴为水平方向，起点在左端*/
row-reverse; /*主轴为水平方向，起点在右端*/
column; /*主轴为垂直方向，起点在上沿*/
column-reverse; /*主轴为垂直方向，起点在下沿*/
}
默认情况下，项目都排在一条线（又称"轴线"）上，flex-wrap属性定义，如果一条轴线排不下，如何换行
.box {
flex-wrap: nowrap; /*默认,不换行*/
wrap; /*换行，第一行在上方*/
wrap-reverse; /*换行，第一行在下方*/
}
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: flex-direction flex-wrap;
}
justify-content属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start; /*默认，左对齐*/
flex-end; /*右对齐*/
center; /*居中*/
space-between; /*两端对齐，项目之间的间隔都相等*/
space-around; /*每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍 */
}
align-items属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start; /*交叉轴的起点对齐*/
flex-end; /*交叉轴的终点对齐*/
center; /*交叉轴的中点对齐*/
baseline; /*项目的第一行文字的基线对齐*/
stretch; /*默认，如果项目未设置高度或设为auto，将占满整个容器的高度*/
}
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start; /*主轴与交叉轴的起点对齐*/
flex-end; /*主轴与交叉轴的终点对齐*/
center; /*主轴与交叉轴的中点对齐*/
space-between; /*主轴与交叉轴两端对齐，轴线之间的间隔平均分布*/
space-around; /*主轴每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大 一倍*/
stretch; /*主轴轴线占满整个交叉轴*/
}
flex-grow, flex-shrink, flex-basis
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为flex: 0 1 auto。
该属性有两个快捷值：
auto (1 1 auto；随着空间放大缩小而放大或缩小)
none (0 0 auto；空间放大缩小；而元素大小不改变)
6.拓展思考
flex在圣杯布局中的应用：
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
CSS部分
.HolyGrail{
display:flex;
min-height:100vh;
flex-direction:column;
margin:0;
}
header,
footer{
flex:1;
background-color:#29bde0;
}
.HolyGrail-body{
display:flex;
flex:4;
background-color:#00ee00;
}
.HolyGrail-content{
flex:1;
background-color:#0000f1;
}
.HolyGrail-nav, .HolyGrail-ads{
/*两个边栏的宽度设为6em */
flex:0 0 6em;
}
.HolyGrail-nav{
/*导航放到最左边*/
order:-1;
background-color:#6c71c4;
}
7.参考文献
Flex布局教程：语法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Flex布局教程：实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
8.更多讨论
flex布局如何制作css任务1
还是使用百分比制作九宫格里的九个正方形，然后使用换行让div按照九宫格分布
如何设置多个不同尺寸img在div内对齐在上边界上
.box {
align-items: flex-start; /*交叉轴的起点对齐*/
}
视频链接： http://pan.baidu.com/s/1nuVlUOx 密码：7e0j
ppt： https://ptteng.github.io/PPT/PPT/css-69-flexbox.html#/
作者：AmaYang
链接：https://www.jianshu.com/p/b61572f54300
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地