一、弹性盒子布局简介
1.1.弹性盒子是什么
1.1.1.弹性盒子是设置了属性值为display:flex或display: inline-flex的容器。弹性盒子布局包括弹性盒子和弹性直接子元素。
代码如下：
<!--html代码-->
<div class="flex-container"><!--弹性盒子-->
<div class="flex-items">flex-item1</div><!--弹性直接子元素-->
<div class="flex-items">flex-item2</div><!--弹性直接子元素-->
<div class="flex-items">flex-item3</div><!--弹性直接子元素-->
<div class="flex-items">flex-item4</div><!--弹性直接子元素-->
<div class="flex-items">flex-item5</div><!--弹性直接子元素-->
</div>
/*css代码*/
/*弹性盒子元素样式*/
.flex-container {
width: 600px;
height: 200px;
background: orange;
display: flex;
}
/*弹性直接子元素样式*/
.flex-items {
width: 50px;
height: 80px;
background: #0f0;
margin: 10px;
}
<div class=”flex-container”></div>为弹性盒子,如下图桔色区域。
<div class=”flex-items”>flex-item5</div>为其中一个弹性子元素，如下图五个绿色区域。
图 1
1.1.2.弹性盒子布局在父级div设置display: flex时，父级div盒子就变成弹性盒子了，如上面css代码。
1.1.3.弹性盒子中的直接多个子元素会按照一定的规则呈现一行排列，如图1所示，五个绿色盒子呈现一行。
1.1.4.弹性盒子中的多个子元素在一行中可以均匀排列，也可以按固定宽排列，也可以两边对齐排列。如图2显示
图2
1.1.5.弹性盒子中的子元素可以在上下方向占满整个高度，也可以靠上或靠下排列，也可以在上下方向中居中排列,还可以按第一个子元素第一行的baseline进行排列如图3。
图3
1.1.6.综上所述：弹性盒子可以实现对所有子元素进行排列、对齐和分配空白空间的功能。
1.2.弹性盒子模型概念图解
1.2.1.弹性盒子模型图解。
图 4
1.2.2.弹性盒子基本概念。
a.用flex进行布局的元素，即为flex容器(flex container);
b.它的直接子元素，即为flex项目(flex items);
c.flex容器有两根轴：水平为主轴(main axis)，垂直为交叉轴(cross axis)
d.主轴的开始位置为main start, 结束位置为main end;
e.交叉轴的开始位置为cross start, 结束位置为cross end;
f.flex项目默认沿主轴排列。
g.单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size;
1.3.弹性盒子分类
任何一个容器元素都可以变成弹性盒子。弹性盒子包括行内（内联）弹性盒子和块级弹性盒子。
1.3.1.块级弹性盒子:设置属性 display: flex的元素
1.3.2.内联弹性盒子:设置属性 display: inline-flex的元素
1.3.3.块级弹性盒子。任何容器都可以变成块状弹性盒子，代码如下
/*css代码*/
div {
display: flex;
}
<!--html代码-->
<div></div>
/*css代码*/
span {
display: flex;
}
<!--html代码-->
<span></span>
1.3.4.内联弹性盒子。任何容器都可以变成内联（行内）弹性盒子，代码如下
/*css代码*/
span {
display: inline-flex;
}
<!--html代码-->
<span></span>
/*css代码*/
div {
display: inline-flex;
}
<!--html代码-->
<div></div>
1.4.理解弹性盒子
1.4.1.父元素变成弹性盒子，第一个作用就是让块级子元素变成了行内块元素，即等同于给属性值为display:block的子元素设置了新属性值display: inline-block，但没有inline-block元素之间的空隙。
1.4.2.块级弹性盒子，理解为该弹性盒子包含display: block这个属性。
1.4.3.行内弹性盒子，理解为该弹性盒子包含display: inline-block这个属性。
1.4.4.弹性盒子主轴默认水平方向，从左到右。可以通过给弹性盒子设置flex-direction值来改变主轴方向。主轴方向有四个。代码如下，效果如下四张图：
<div class="wrapper">
<div class="flex-container">
<div class="flex-items">flex item1</div>
<div class="flex-items">flex item2</div>
<div class="flex-items">flex item3</div>
<div class="flex-items">flex item4</div>
<div class="flex-items">flex item5</div>
</div>
</div>
.wrapper {
width: 1000px;
margin: 100px auto;
}
.flex-container {
width: 800px;
height: 200px;
background: orange;
display: flex;
flex-direction: row;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
}
.flex-items {
width: 130px;
height: 150px;
background: green;
color: #fff;
margin: 10px;
}
a.第一个子元素(flex-items)水平左边对齐，所有子元素从左到右排列，修改上边代码，在父元素上用flex-direction: row实现,默认值就是这个；
图 5
b.第一个子元素(flex-items)水平右边对齐，所有子元素从右到左排列，修改上边代码，在父元素上用flex-direction: row-reserve实现；
图 6
c. 第一个子元素(flex-items)垂直上边对齐，所有子元素从上到下排列，修改上边代码，在父元素上用flex-direction: column实现；
图 7
d.第一个子元素(flex-items)垂直下边对齐，所有子元素从下到上排列，修改上边代码，在父元素上用flex-direction: column-reserve实现；
图 8
二、弹性盒子实现子元素水平排列布局的各种方法。
2.1.通过弹性盒子（flex-container)元素的属性justify-content来设置
2.1.1.属性justify-content解析。
a.justify-content表示内容对齐，作用是把弹性盒子(flex-container)中的直接子元素按主轴线(main axis)对齐，并成排成一行。
b.代码如下:
<!--html代码-->
<div class="flex-container"><!--弹性盒子-->
<div class="flex-items">flex-item1</div><!--弹性直接子元素-->
<div class="flex-items">flex-item2</div><!--弹性直接子元素-->
<div class="flex-items">flex-item3</div><!--弹性直接子元素-->
<div class="flex-items">flex-item4</div><!--弹性直接子元素-->
<div class="flex-items">flex-item5</div><!--弹性直接子元素-->
</div>
/*css代码*/ /*弹性盒子元素样式*/ .flex-container { width: 600px; height: 200px; background: orange; display: flex; justify-content: flex-start | flex-end | center | space-between | space-around; } /*弹性直接子元素样式*/ .flex-items { width: 50px; height: 80px; background: #0f0; margin: 10px; }
2.1.2.属性justify-content的语法。
justify-content: flex-start | flex-end | center | space-between | space-around
2.1.3.属性justify-content属性值的图解
a.justify-content:flex-start表示直接子元素(flex-item)靠开始位置(左边)对齐,所有直接子元素(flex-item)在主轴线(main axis)上从按开始位置(左)到结束位置(右)的方向依次排列成一行。如下图（图9）
图 9
b.justify-content:flex-end表示直接子元素(flex-item)靠结束位置(右边)对齐,所有直接子元素(flex-item)在主轴线(main axis)上从按开始位置(左)到结束位置(右)的方向依次排列成一行。如下图（图10）
图 10
c.justify-content:center表示直接子元素(flex-item)在开始(左边)到结束(右边）的中间位置对齐,所有直接子元素(flex-item)在主轴线(main axis)上按从开始位置(左)到结束位置(右)的方向依次排列成一行。如下图（图11）
图 11
d.justify-content:space-between表示第一个直接子元素(flex-item)靠开始位置(左边)对齐,最后一个直接子元素(flex-item)靠结束位置(右边)对齐,剩下的其他直接子元素(flex-item)在主轴线(main axis)上按从开始位置(左)到结束位置(右)的方向余下的空间依次均匀排列成一行。如下图（图12）
图 12
e.justify-content:space-around表示所有直接子元素(flex-item)在主轴线(main axis)上按从开始位置(左)到结束位置(右)的方向依次均匀排列成一行，每一个直接子元素(flex-item)在左右方向上所占空白区域的空间是一样的。此时，flex-item上设置的外边距会失效。如下图（图13）
图 13
f.justify-content:space-evenly表示所有直接子元素(flex-item)在主轴线(main axis)上按从开始位置(左)到结束位置(右)的方向依次均匀排列成一行，每两个直接子元素(flex-item)之间的距离与起使位置到第一个元素的距离与最后一个元素到结束位置的距离都是相同的。如下图（图13-1）
图 13-1
2.2.通过弹性盒子的子元素(flex-items)的属性flex来设置
2.2.1.属性flex解决弹性盒子直接子元素(flex-items)怎样占用弹性盒子容器空间,以达到刚好占满空间的目的。
2.2.2.和属性border是这三个属性border-width,border-style,border-color的复合属性一样，属性flex是flex-grow,flex-shrink,flex-basis这三个属性的复合属性。
2.2.3.flex-grow解析：
<!--html代码-->
<h3 style="text-align: center">弹性盒子子元素没有设置flex-grow: 1</h3>
<div class="flex-container">
<div class="flew-items flew-items1">1</div>
<div class="flew-items flew-items2">2</div>
<div class="flew-items flew-items3">3</div>
<div class="flew-items flew-items4">4</div>
<div class="flew-items flew-items5">5</div>
</div>
<h3 style="text-align: center">弹性盒子子元素设置flex-grow: 1</h3>
<div class="flex-container1">
<div class="flew-items flew-items1">1</div>
<div class="flew-items flew-items2">2</div>
<div class="flew-items flew-items3">3</div>
<div class="flew-items flew-items4">4</div>
<div class="flew-items flew-items5">5</div>
</div>
.flex-container {
max-width: 800px;
width: 100%;
margin: 30px auto;
background: orange;
height: 150px;
display: flex;
}
.flex-container1 {
max-width: 800px;
width: 100%;
margin: 30px auto;
background: orange;
height: 150px;
display: flex;
}
.flex-container .flew-items {
width: 100px;
height: 100px;
color: #fff;
}
.flex-container1 .flew-items {
width: 100px;
height: 100px;
flex-grow: 1;
color: #fff;
}
.flew-items1 {background: green;}
.flew-items2 {background: black;}
.flew-items3 {background: blue;}
.flew-items4 {background: red;}
.flew-items5 {background: gray;}
图 14
- 该属性值适用这种情况：所有弹性盒子子元素宽度之和小于父级弹性盒子内容容器(flex-container)宽时。
- 该值解释为：弹性直接子元素(flex-items)的盒子弹性宽度增加的比率相对其他设置了flex-grow属性值的弹性直接子元素(flex-items)弹性宽度增加的倍数。
- 假设增加的比率为x,第一个元素的宽度为n1width,第一个元素的倍率为m,第二个元素的宽度为n2width,第二个元素的倍率为i,第三个元素的宽度为n3width,第三个元素的倍率为j, 弹性盒子的内容宽是flexContentWidth,
- 那么公式为：
n1width * (1 + mx) + n2width * (1 +ix) + n3width * (1 + jx) = flexContentWidth
- 弹性盒子子元素(flex-items)设置属性值为正整数或0；0表示宽度是原始内容宽，flex-items的宽度不会增加。
- 所有设置了flex-grow属性值（用n表示,且该值不为0)的弹性直接子元素(flex-items)按比率（x) * 该属性值(n) * 直接子元素原来的宽度 来分配弹性盒子的剩余空间宽度。
- n1width * (1 + m * x)为第一个元素调整后的宽度。n2width * (1 + i * x)为第二个元素调整后的宽度。n3width * (1 + j * x)为第三个元素调整后的宽度。
- 如果是flex-grow属性值为0，并且存在剩余空间宽度，根据公式可以得出，该弹性直接子元素宽度也不放大,即不占用剩余空间宽度。
- 该属性值默认为0。
- 当设置flex-grow: 1时页面的代码及显示结果。
2.2.4.flex-shrink解析：
<!--html代码-->
<h3 style="text-align: center">弹性盒子子元素设置flex-shrink: 0</h3>
<div class="flex-container">
<div class="flew-items flew-items1">1</div>
<div class="flew-items flew-items2">2</div>
<div class="flew-items flew-items3">3</div>
<div class="flew-items flew-items4">4</div>
<div class="flew-items flew-items5">5</div>
</div>
<h3 style="text-align: center">弹性盒子子元素设置flex-shrink: 1</h3>
<div class="flex-container1">
<div class="flew-items flew-items1">1</div>
<div class="flew-items flew-items2">2</div>
<div class="flew-items flew-items3">3</div>
<div class="flew-items flew-items4">4</div>
<div class="flew-items flew-items5">5</div>
</div>
.flex-container {
max-width: 800px;
width: 100%;
margin: 30px auto;
background: orange;
height: 150px;
display: flex;
}
.flex-container1 {
max-width: 800px;
width: 100%;
margin: 30px auto;
background: orange;
height: 150px;
display: flex;
}
.flex-container .flew-items {
width: 200px;
height: 100px;
flex-shrink: 0;
color: #fff;
}
.flex-container1 .flew-items {
width: 200px;
height: 100px;
flex-shrink: 1;
color: #fff;
}
.flew-items1 {background: green;}
.flew-items2 {background: black;}
.flew-items3 {background: blue;}
.flew-items4 {background: red;}
.flew-items5 {background: gray;}
图 15
- 该属性值适用这种情况：所有弹性盒子子元素宽度之和大于弹性盒子容器(flex-container)内容宽时。
- 该值解释为：弹性直接子元素(flex-items)的盒子弹性宽度减少的比率相对其他设置了flex-shrink属性值的弹性直接子元素(flex-items)弹性宽度减少的倍数。
- 假设减少的比率为x,第一个元素弹性调节前的宽度为n1width,第一个元素的倍率为m,第二个元素弹性调节前的宽度为n2width,第二个元素的倍率为i,第三个元素弹性调节前的宽度为n3width,第三个元素的倍率为j, 弹性盒子的内容宽是flexContentWidth,
- 那么公式为：
n1width * (1 - m * x) + n2width * (1 - i * x) + n3width * (1 - j * x) = flexContentWidth
- 值为正整数或0；
- 所有设置了flex-shrink属性值（用n表示,且该值不为0)的弹性直接子元素(flex-items)按缩小的比率（x) * 该属性值(n) * 直接子元素原来的宽度来计算弹性盒子的减少的空间宽度。
- n1width * (1 – m * x)为第一个元素调整后的宽度。n2width * (1 – i * x)为第二个元素调整后的宽度。n3width * (1 – j * x)为第三个元素调整后的宽度。
- 如果是flex-grow属性值为0，并且存在剩余空间宽度，根据公式可以得出，该弹性直接子元素宽度也不放大,即不占用剩余空间宽度。
- 该属性值默认为1。
2.2.5.flex-basis解析是弹性直接子元素(flex-items)的盒子的默认基准值,即子元素在未用弹性盒子调节之前占的宽度。相当于设置弹性直接子元素的宽度width值。
2.2.6.flex这个复合属性值可以这样表示：
/*
*1.表示flex-grow: 0; flex-shrink: 0; flex-basis: auto;
*2.下面两行css代码中flex的值等同，flex: none;是简写写法;
*/
flex-item {
flex: 0 0 auto;
flex: none;
}
/*
*1.表示flex-grow: 0; flex-shrink: 0; flex-basis: auto;
*2.下面两行css代码中flex的值等同，flex: auto;是简写写法;
*/
flex-item {
flex: 1 1 auto;
flex: auto;
}
/*
*1.表示flex-grow: 0; flex-shrink: 0; flex-basis: auto;
*2.下面两行css代码中flex的值等同,flex: initial;是简写写法;
*3.flex的默认属性值就是initial;
*/
flex-item {
flex: 0 1 auto;
flex: initial;
}
2.2.7.代码如上：flex这个复合属性值有auto, none, initial, 还有inherit表示继承父级该属性值;
2.2.8.flex:1 和 flex: auto是同样的效果;
2.3.属性justify-content和属性flex的区别。
2.3.1.justify-content是弹性盒子容器的属性。flex是子项目的属性。
2.3.2.弹性盒子属性justify-content不改变子元素的宽度；flex改变的是元素的宽度。
2.3.3.弹性盒子属性justify-content改变的是子元素在的对齐方式和排序方式；而flex改变的是元素的宽度。
2.4.通过给具体某个子元素（flex-items)设置属性order来决定该子元素在所有子元素中的顺序。
2.4.1.order属性是子元素（flex-items)的属性。
2.4.2.order属性表示该子元素(flex-items)在所有子元素中的顺序。
2.4.3.order值为整数或initial或inherit。initial为默认值。inherit为继承父级该属性值。
2.4.4.order值越小，排序越靠前。
三、弹性盒子实现子元素竖直方向对齐的各种属性。
3.1.通过弹性盒子（flex-container)元素的属性align-items来设置子元素(flex-items)在上下方向交叉轴（cross axis)的对齐方式。
3.1.1.属性align-items解析。
3.1.2.aligin-items是弹性盒子容器的属性;
3.1.3.align-items表示所有子元素组成的这一行整体在上下方向（交叉轴）的对齐方式。
3.1.4.aligin-items有五个属性值：flex-start|flex-end|center|stretch|baseline
3.1.5.aligin-items默认值为stretch
3.1.6.aligin-items值为flex-start的效果图
图 16
3.1.7.aligin-items值为flex-end的效果图
图 17
3.1.8.aligin-items值为center的效果图
图 18
3.1.9.aligin-items值为stretch的效果图
图 19
3.1.10.aligin-items值为baseline的效果图,它表示以子元素第一行文字的基线对齐 如下图中的线为baseline
图 20
3.2.通过弹性盒子（flex-container)子元素的属性align-self来设置单个子元素(flex-items)在上下方向交叉轴（cross axis)的对齐方式。
3.2.1.属性align-self解析。
3.2.2.align-self是弹性盒子子元素（flex-items)的属性;
3.2.3.align-self和弹性盒子的属性align-items类似，同样有五个属性值flex-start|flex-end|center|stretch|baseline。
3.2.4.flex-start表示设置该属性的子元素在上下方向（默认）即交叉轴靠交叉轴开始位置对齐,效果如下图（图21)。
3.2.5.flex-end表示设置该属性的子元素在上下方向（默认）即交叉轴靠交叉轴结束位置对齐,效果如下图（图21)。
3.2.6.center表示设置该属性的子元素在上下方向（默认）即交叉轴上下居中对齐,效果如下图（图21)。
3.2.7.stretch表示设置该属性的子元素在上下方向（默认）即交叉轴，占满整个容器高度，该值在height: auto生效,效果如下图（图21)。
3.2.8.baseline表示设置该属性的子元素在上下方向（默认）即交叉轴上 以 第一个设置值为baseline的子元素第一行文字的baseline上 对齐生效,效果如下图（图19)，下图baseline的位置来源于第5个子项目的第一行文字”flex”的基线。
图 21
3.2.9.auto，继承父元素的align-items值。
3.3.align-items和align-self的相同点和区别。
3.3.1.align-itemms、align-self都是设置弹性盒子子元素在交叉轴上的位置，即对齐方式。
3.3.2.align-itemms、align-self他们的属性值是一样子。
3.3.3.align-items是弹性盒子的属性，align-self是某个弹性盒子子元素的属性。
3.3.4.align-items作用于所有的子元素，align-self作为于单个弹性盒子子元素。
3.3.5.align-self有auto值，继承父元素的align-items值。align-items没有auto值。
四、弹性盒子的子元素水平方向溢出弹性盒子的处理方法。
4.1.flex-wrap、align-content、flex-flow；
4.2.flex-wrap解析；
4.2.1.下图中演示的结果都是在flex-direction: row即默认值的前提下。
4.2.2.当子元素宽度超过内容宽时，想让超出的子元素另起一行的话在弹性盒子用这个属性flex-wrap:wrap设置。如下图（图22）。
图 22
4.2.3.flex-wrap有nowrap|wrap|wrap-reverse|initial|inherit五个值，initial是默认值，inherit是继承父级flex-wrap值，nowrap是不换行，wrap是另起一行，wrap-reverse是反过来从下到上另起一行，效果如下图。
图 23：flex-wrap: wrap-reverse的效果图
4.3.flex-flow的解析；
4.3.1.flex-flow是flex-wrap和flex-direction的复合写法。
4.3.2.{flew-flow: value1 value2}；value1是flex-wrap的值，value2是flex-direction的写法。
4.4.align-content的解析
4.4.1.align-content和align-items的用法类似，区别是align-content是对行进行对齐。algin-items是对子元素进行对齐
4.4.2.align-content的值有stretch|center|flex-start|flex-end|space-between|space-around；
4.4.3.stretch所有行上下拉申，占满整个起点和终点方向；
4.4.4.center所有行一起上下居中；
4.4.5.flex-start第一行从起点（上）开始排列；
4.4.6.flex-end第一行从终点（下）开始排列；
4.4.7.space-between是第一行向起点（上）对齐，最后一行向终点（下）对齐，其他行均匀布局在中间位置；
4.4.8.space-around是所有行在起点到终点的上下空间均分排列。
五、弹性盒子的属性和弹性盒子子元素的属性。
5.1.弹性盒子的属性；
5.1.1.justify-content;
5.1.2.align-items;
5.1.3.flex-direction;
5.1.4.flex-wrap;
5.1.5.flex-flow;
5.1.6.align-content;
5.2.弹性盒子子元素的属性；
5.2.1.flex[flex-grow|flex-shrink|flex-basis];
5.2.2.align-self;
5.2.3.order;
博主联系方式:
- 微信：34419369
- QQ: 34419369
- 公众号：前方录
正在编辑中，未完待续！