Flexbox（弹性盒布局模型）以及适用场景

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【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#/