CSS3总结五：弹性盒⼦（flex）、弹性盒⼦布局弹性盒⼦容器的属性与应⽤
display:flex/inline-flex
flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow
弹性盒⼦⼦项的属性与应⽤
order
align-self
flex
flex-grow
flex-shrink
flex-basis
弹性盒⼦布局
flex居中/T字布局
可动态增加导航栏
等分布局
圣杯布局
流式布局
⼀、弹性盒⼦容器的属性与应⽤
1.1.定义弹性盒⼦display:flex/inline-flex
在盒模型（box）中剖析了单个元素的盒模型结构，那么display则是⽤来定义盒⼦在⽂档中的模型结构，⽐如display:inline表⽰为内联元
素，display:block表⽰为块级元素，dispaly:inline-block表⽰为⾏级块元素；还可以设置dispaly:table表⽰为表格等，⽽这篇博客是来剖析CSS3的弹性盒⼦，flex表⽰为弹性块级盒⼦，inline-block表⽰为⾏级块盒⼦，这两者的区别与块级元素和⾏级块元素是⼀样的，就是于相邻元素的排列⽅式不同。
注：display在CSS属性中被分类为布局，与float、clear、visibility、overflow划分为同⼀类别的属性，但是在这个分类中都是⾸先基于display的展⽰⾏为为基础，才有浮动，清除浮动，是否可见，溢出处理等状态。所以display作为布局的核⼼功能，除了定义外部的元素与元素之间的排列⽅式，从CSS2到CSS3更是通过扩展display的参数由原来内部固定的结构模型扩展到了可⾃定义的结构模型，就是弹性盒⼦flex。
在弹性盒⼦中，原来的margin,pading,content还有width的内部计算⽅式都不在基于浏览器内核默认的
模型来计算，⽽是通过与flex相关的⼀系列属性来定义计算盒⼦内部项（内部元素）的排列布局。这部分CSS内容对应着浏览器内核渲染页⾯时内部调⽤的layout()⽅法。可以这么来说，原来的layout()直接通过识别块级元素、⾏级块元素、⾏级元素、表格这四种固定实现的布局模型直接调⽤固定的计算模型计算出元素在页⾯中展⽰的(结构)样式，⽽CSS3中的flex布局模式则需要浏览器内核调⽤⾃定义的flex相关参数来展⽰元素的(结构)样式。【以上这部分内容需要对浏览器渲染原理有⼀定的了解，详细可以参考：】
1.2.以主轴和交叉轴为布局逻辑基础的⼦项位置布局
1.2.1通过flex-direction定义主轴以及主轴⽅向，row（横向⾃左向右）、row-reverse（横向⾃右向左）、column（纵向⾃上向下）、column-reverse（纵向⾃下向上）。交叉轴始终与主轴成相对状态。
最常见的主轴与交叉轴的切换应⽤就是导航栏在屏幕⾜够宽的时候呈横排展⽰，当浏览器窗⼝缩⼩到⼀定程度时，导航栏呈纵向排列展⽰。
a b c a b c
a b c
a b c
a b c
d e f a b c
d e
f a b c d e
f a b c d e f
a b c d e f
a
flex布局详细讲解a
a
a
a
下⾯再来看⼀些具体的flex-direction 的⽰例：
实现以上⽰例的核⼼代码：
flex-direction:row;/*demo1--该值为默认值*/flex-direction:column;/*demo2--*/flex-direction:row-reverse;/*demo3--*/flex-direction:column-reverse;/*demo4--*/
1.2.2通过flex-wrap 定义单⾏或多⾏的弹性盒⼦布局，nowrap （单⾏布局，默认值）、wrap （多⾏布局）、wrap-reverse （多⾏，且按每⾏反转排列）。该属性主要⽤于启⽤弹性盒⼦的多⾏布局功能，⽽这⾥的多⾏并⾮传统的纵横排列上的⾏，准确的来说是当主轴上⽅向上出现压缩时在交叉轴上开启多个平⾏主轴⽅向的布局。看下列⽰例： 实现以上⽰例的核⼼代码：
1 /*demo1--按照默认的主轴⽅向和默认的单⾏布局*/
2 flex-direction:row;
3 flex-wrap:nowrap;
4 /*demo2--主轴⽅向为纵向，默认单⾏布局*/
5 flex-direction:column;
6 flex-wrap:nowrap;
7 /*demo3--主轴⽅向默认，采⽤多⾏布局*/ 8 flex-direction:row; 9 flex-wrap:wrap;
10 /*demo4--主轴⽅向默认，采⽤多⾏且反向排列布局*/11 flex-direction:row;
12 flex-wrap:wrap-reverse;
13 /*demo5--主轴⽅向为纵轴，采⽤多⾏布局*/14 flex:direction:column;15 flex-wrap:wrap;
关于flex 布局的多⾏与单⾏可以⽤块级元素和⾏级块元素的排列布局来理解，并且在多⾏布局也就真正意义上实现了交叉轴的的意义，wrap-reverse 可以理解为交叉轴⽅向上的反向布局，所以它只会影响到⾏的起始位置和排列，并不会影响到每⾏⼦项的排列。 1.2.3弹性盒⼦flex 的对齐属性：justify-content 、align-items 、align-content 。
justify-content ：表⽰主轴⽅向的对齐属性，对齐⽅式分别有轴的正⽅向(起始⽅向)对齐、轴的反⽅向对其、轴的居中对齐、项⽬均衡散列对齐（最前⽅和最后⽅的项⽬与⽗级没有间距）、项⽬正反两侧等距对齐（类似两侧加上margin ）===【flex-start 、flex-end 、center 、space-between 、space-around 】；
align-items：表⽰交叉轴⽅向的（⾏内轴）对齐属性，属性值(同解析中的类别顺序)，对齐⽅式分别有轴的正⽅向对齐，轴的反⽅向对齐、基于⾏内轴的中⼼对齐、基于内容底线对齐(也可以说是基于内容对齐)、将项基于交叉轴⽅向基于⽗级最⼤访问伸缩===【flex-start 、flex-end 、center 、baseline 、strecth 】；
align-content 表⽰所有项⽬的整体对齐⽅式（只对多⾏起作⽤，准确的说这个属性才是交叉轴的对齐⽅式）对齐⽅式分别有轴的正⽅向对齐、轴的反⽅向对其、轴的居中对齐、沿交叉轴的⾏列均衡散列对齐、沿交叉轴的⾏列两侧等距对齐、沿交叉轴的⾏列平均分配空间的伸缩===【flex-start 、flex-end 、center 、space-between 、space-around 、strecth 】
b c b
c
b
c
b
c
b
c
a b c a
b
c
a
b
c
a
b
c
a
b
c
a b c d e a
b
c
d
e
a
b
c
d
e
a
b
c
d
e
f
g
a
b
c
d
e
f
g
a
b
c
d
e
a b c a b c d e f
以上五个⽰例是justify-content的五个属性值所表现的效果，代码：
1justify-content:start;
2justify-content:end;
3justify-content:center;
4justify-content:space-between;
5justify-content:space-around;
以上五个⽰例是align-items的五个属性值所表现的效果，代码：
1align-items:flex-start;/*所有⼦项沿上边缘对齐，并紧贴⽗级的上内边缘*/
2align-items:flex-end;/*所有⼦项沿下边缘对齐，并紧贴⽗级的下内边缘*/
3align-items:center;/*所有⼦项沿⾏内轴中线对齐*/
4align-items:baseline;/*这⾥⼦项b添加了margin-top:15px;⼦项c添加了padding-top:15px;*/
5align-items:stretch;/*这⾥所有⼦项没有设置height*/
以上六个⽰例是align-content的五个属性值所表现的效果，代码：
1flex-wrap:wrap;/*所有align-content⽰例必须都是在多⾏列（相对主轴）的情况下才⽣效，所以这⾏代码是所有⽰例中都有*/
2align-content:flex-start;/*⽰例⼀*/
3align-content:flex-end;/*⽰例⼆*/
4align-content:center;/*⽰例三*/
5align-content:space-between；/*⽰例四*/
6align-content:space-around；/*⽰例五*/
7align-content:stretch;/⽰例六，所有⼦项不设置height/
1.2.4最后弹性盒⼦容器上还有⼀个属性就是flex-flow，这是个符合属性，相当于flex-flow ：<flex-direction> || <flex-wrap>；符合属性的应⽤就不多解释了，但是由于弹性盒⼦的功能复杂性建议还是按照拆分形式书写代码，也有利于代码的可读性（语义化）。
⼆、弹性盒⼦⼦项的属性与应⽤
2.1order⼦项排序，所有⼦项order默认值为0，⽤来指定⼦项的排列位置；
上⾯⽰例中对应的order序号：
⽰例⼀：a:2，b:1，c:0；
⽰例⼆：a:5，b:4，c:3，d:2，e:1，f:0；
2.2align-self单个⼦项沿着交叉轴⽅向定位，在flex-wrap:wrap的多⾏多列情况下不起作⽤，align-self的权重⼤于align-items。
a
b
c d
e f  以上⽰例的关键代码：
1 /*⽗级容器的css 代码*/
2 display:flex;
3 justify-content: space-between;
4 align-items:center;
5 /*各个⼦项的align-self*/
6 align-self:auto;/*继承align-items 的属性*/
7 align-self:flex-start;/*交叉轴的起始端*/
8 align-self:flex-end;/*交叉轴的末尾端*/
9 align-self:center;/*交叉轴的中间*/
10 align-self:baseline ；/*表⽰⾏内轴的最上⽅，与flex-start 的效果⼀致*/11 align-self:stretch ；/*基于交叉轴⽅向伸缩，不设置交叉轴⽅向的宽⾼*/
注：align-items 和align-self 只能作⽤于flex-wrap:nowrap(默认值)的弹性盒⼦上。
2.3复合属性flex ：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>。⽤来设置弹性盒⼦⼦项的伸缩⽐率，flex-grow 表⽰伸展⽐率、flex-shrink 表⽰缩⼩⽐率、flex-basis 表⽰弹性盒⼦⼦项在主轴⽅
向上的最⼩宽度或⾼度。具体的计算公式通过实例来逐⼀解析：2.
3.1伸展⽐率flex-grow 的计算公式与⽰例【重点】：
公式：if （弹性盒⼦内容宽度 > ⼦项宽度之和 ）==>flex-grow ⽣效；
拉伸计算：（弹性盒⼦内容宽度 - ⼦项宽度之和）/ ⼦项flex-grow 之和 * 每个⼦项的flex-grow ⽐率 = 每个⼦项的拉升宽度；解说：flex-grow 默认值为0
，拉伸计算是按照拉伸⽐率分配剩下的空间。拉升⽅向是基于主轴⽅向向主轴的两侧拉伸。
⽰例代码：
1 <div class ="wrapper">
2    <div class ="content">1</div >
3    <div class ="content">2</div >
4    <div class ="content">3</div >
5 </div >
6 <!--css-->
7 *{
8    margin: 0; 9    padding: 0;10 }
11 .wrapper{
12    width: 600px;13    height: 600px;
14    border: 1px solid black;15    display: flex;
16    flex-direction: row;17 }
18 .wrapper:hover{
19    flex-direction: column;20 }21
22 .content{
23    height: 100px;
24    box-sizing: border-box;25 }26
27 .content:first-of-type{28    width: 100px;
29    background-color: #aff;30    flex-grow: 1;31 }
32 .content:nth-of-type(2){33    width: 80px;
34    background-color: #0ff;35    flex-grow: 3;36 }
37 .content:nth-of-type(3){38    width: 50px;
39    background-color: #ffa;40 }
View Code
2.3.2缩⼩⽐率flex-shrink的计算公式与⽰例【重点】：
公式：if（弹性盒⼦内容宽度 < ⼦项宽度之和）==>flex-shrink⽣效；
缩⼩计算：（当前被计算的⼦项宽度 * 当前被计算的⼦项的flex-shrink /（每个⼦项宽度 * 该⼦项的flex-shrink + 每个⼦项宽度 * 该⼦项的flex-shrink + ...））* （所有⼦项宽度之和 - ⽗级弹性盒⼦的内容宽度）== 当前被计算的⼦项要缩⼩的宽度；
解说：flex-shrink的默认值是1，实际上flex-shrink的缩⼩计算需要进⾏加权平均。如果设置flex-shrink:0表⽰该⼦项不参与压缩。
⽰例代码：
1<div class="wrapper">
2<div class="content">1</div>
3<div class="content">2</div>
4<div class="content">3</div>
5</div>
6<!--css-->
7 *{
8    margin: 0;
9    padding: 0;
10 }
11 .wrapper{
12    width: 600px;
13    height: 300px;
14    border: 1px solid black;
15    display: flex;
16    flex-direction: row;
17 }
18 .content{
19    height: 100px;
20 }
21
22 .content:first-of-type{
23    width: 200px;
24    background-color: #aff;
25 }
26 .content:nth-of-type(2){
27    width: 200px;
28    background-color: #0ff;
29 }
30 .content:nth-of-type(3){
31    width: 400px;
32    background-color: #ffa;
33    flex-shrink: 3;
34 }
View Code
关于flex-shrink⼦项缩⼩的计算除了加权平均进⾏缩减以外，还需要注意的是，在实际的加权平均计算
中，并⾮使⽤⼦项的width计算，⽽实质上是使⽤真实的内容区宽度content-width来进⾏计算的。这⾥特别需要主义的就算是⼦项使⽤box-sizing:border-box；其flex-shrink的计算中也不会包含border和padding的宽度（标准盒模型下也是使⽤content-width计算）。⽰例：
⽰例代码：
1<div class="wrapper">
2<div class="content"></div>
3<div class="content"></div>
4<div class="content"></div>
5</div>
6<!--css-->

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。