一、flex-grow：设置弹性元素的增长因子
1.代码展示
实例
<h3>flex-grow:设置弹性元素的增长因子</h3>
<h4>1.所有的弹性元素不增长，以原始宽度显示，增长因子为：0（默认）</h4>
<div class="container flex demo1">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>2.将全部剩余空间分配给指定的弹性元素。可以将指定的元素的增长因子设置为1，其他元素为0</h4>
<div class="container flex demo2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>3.全部剩余空间按增长因子在不同弹性元素间分配（按比例）。1：1：3</h4>
<div class="container flex demo3">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<h4>4.全部剩余空间按增长因子在不同弹性元素间分配（按比例）。0.4：0.4：1.2</h4>
<div class="container flex demo4">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</div>
<h4>5.每一个弹性元素宽度不同时，同样适用以上分配方式</h4>
<div class="container flex1 demo5">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
.container{
border: 1px solid red;
margin: 15px;
background-color: seashell;
width: 700px;
box-sizing: border-box;
}
.flex,.flex1{
display: flex;
}
.flex .item{
box-sizing: border-box;
width: 150px;
border: 1px solid green;
}
.demo1 > .item{
/* 默认值 */
flex-grow: 0;
}
.demo2 > .item:first-of-type{
flex-grow: 0;
}
.demo2> .item:nth-of-type(2){
flex-grow: 0;
}
.demo2 > .item:last-of-type{
flex-grow: 1;
}
/*
可分配空间：700 - 150 * 3=250px
增长因子之和：5
增长比例=增长因子/增长因子之和
第一个：1/5 = 0.2
第二个：1/5 = 0.2
第三个：3/5 = 0.6
计算每一个元素的增长量
第一个：250 * 0.2 = 50
第二个：250 * 0.2 = 50
第三个：250 * 0.6 = 150
计算元素最后的宽度
第一个：150 + 50 =200
第二个：150 + 50 =200
第三个：150 + 150=300
小数一样适用
*/
.demo3 >.item:first-of-type{
flex-grow: 1;
}
.demo3 >.item:nth-of-type(2){
flex-grow: 1;
}
.demo3 > .item:last-of-type{
flex-grow: 3;
}
.demo4 >.item:first-of-type{
flex-grow: 0.4;
}
.demo4 >.item:nth-of-type(2){
flex-grow: 0.4;
}
.demo4 > .item:last-of-type{
flex-grow: 1.2;
}
.flex1 >.item{
box-sizing: border-box;
border: 1px solid green;
}
.flex1 .item:last-of-type{
width: 120px;
flex-grow: 1;
}
.flex1 .item:first-of-type{
width: 180px;
flex-grow: 1;
}
.flex1 .item:nth-of-type(2){
width: 150px;
flex-grow: 3;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.效果展示
3.总结
1、增长因子存在的条件：
1.容器设置自定义宽度
2.元素设置自定义宽度
3.元素在主轴上的总宽度小于容器的宽度，这样才会出现多余空间
4.弹性容器不允许换行
二、flex-shirnk：设置弹性元素的缩减因子
1.代码展示
实例
<h3>flex-shrink:设置弹性元素的缩减因子</h3>
<h4>1.所有的弹性元素（宽度相同）不缩减，以原始宽度显示，缩减因子为：0（默认）</h4>
<div class="container flex demo1">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>2.所有的弹性元素（宽度相同）自适应容器宽度且不换行，所有元素的缩减因子均为1</h4>
<div class="container flex demo2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>3.当三个弹性元素（宽度相同）的缩减因子不相等时，按照比例缩减（小数同样适用）</h4>
<div class="container flex demo3">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>4.当三个弹性元素的宽度不同时，在定义缩减因子后，还需要重新微调缩减比例</h4>
<div class="container flex demo4">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
.container{
border: 1px solid red;
box-sizing: border-box;
background-color: rosybrown;
margin: 15px;
width: 550px;
/* padding: 5px; */
}
.flex{
display: flex;
box-sizing: border-box;
}
.item{
width: 250px;
border: 1px solid green;
}
.demo1 > .item{
flex-shrink: 0;
}
/*
计算步骤:
1. 获取基本变量
1.1 多余待缩放空间: (250px + 250px +250px) - 550px = 200px
1.2 缩减因子: 第一个: 1, 第二个: 1, 第三个: 1
1.3 增长因子之和: 1 + 1 + 1 = 1
2. 计算缩减比例
2.1 计算公式: 缩减比例 = 缩减因子 / 缩减因子之和
2.2 第一个元素缩减比例: 1 / 3 = 0.3333
2.3 第二个元素缩减比例: 1 / 3 = 0.3333
2.4 第三个元素缩减比例: 1 / 3 = 0.3333
3. 计算每个元素的缩减
3.1 第一个元素缩减: 20px * 0.3333 = 66.666px
3.2 第二个元素缩减: 20px * 0.3333 = 66.666px
3.3 第三个元素缩减: 20px * 0.3333 = 66.666px
4. 计算每个元素最终宽度
4.1 第一个元素: 250px - 66.66px = 183.33px
4.1 第二个元素: 250px - 66.66px = 183.33px
4.1 第三个元素: 250px - 66.66px = 183.33px
*/
.demo2 > .item{
flex-shrink: 1;
}
/*
缩减因子之和: 1 + 2 + 3 = 6
每个元素的缩减比例依次为: 1/6, 2/6, 3/6, 即: 0.1667, 0.3333, 0.5
每个元素的缩减量依次为: 200*0.1667 = 33.34px, 66.666px, 100px
每个元素的最终宽度依次为: 250-33.34=216.66px, 183.33px, 150px
*/
.demo3 > .item:first-of-type{
flex-shrink: 1;
}
.demo3 > .item:nth-of-type(2){
flex-shrink: 2;
}
.demo3 >.item:last-of-type{
flex-shrink: 3;
}
/*
元素总宽度: 220 + 280 + 250 = 750
容器宽度550, 于是有200px的等缩减空间, 需要在每个元素中进行摊派
1. 计算缩减因子的的缩小比例: 等待缩减空间 / 每个弹性元素的宽度与缩减因子乘积的总和
缩减因子的缩小比例: 200 / (220 * 2) + (250 * 2) + (280 *6) = 200 / 2620 = 0.07633588
2. 计算每个元素的缩减量: 元素宽度 * ( 缩减因子 * 缩减因子的缩减比例)
第一个元素: 220 * ( 2 * 0.07633588) = 33.5877 px
第二个元素: 250 * ( 2 * 0.07633588) = 38.1679 px
第三个元素: 280 * ( 6 * 0.07633588) = 128.2442 px
3. 计算每个元素最终宽度
第一个元素: 220 - 33.5877 = 186.4123 px
第二个元素: 250 - 38.1679 = 211.8321 px
第三个元素: 280 - 128.2442 = 151.7558 px
*/
.demo4 >.item:first-of-type{
width: 220px;
flex-shrink: 2;
}
.demo4 >.item:nth-of-type(2){
width: 250px;
flex-shrink: 2;
}
.demo4 > .item:last-of-type{
width: 280px;
flex-shrink: 6;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.效果展示
3.总结
缩减因子使用场景:
1. 弹性元素设置了自定义宽度
2. 弹性容器设置了自定义宽度
3. 弹性元素总宽度在主轴上超过了弹性容器的宽度
4. 弹性容器不允许换行
三、flex-basis:设置弹性元素的基准尺寸
1.代码展示
实例
<h3>flex-basis:设置弹性元素的基准尺寸</h3> <h4>1.在未设置弹性元素宽度时，以内容宽度显示。属性值为content</h4> <div class="container flex demo1"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div> <hr> <h4>2.在设置弹性元素宽度时，以该宽度显示</h4> <div class="container flex demo2"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div> <hr> <h4>3.自动状态下，由浏览器根据预设值自行判定</h4> <div class="container flex demo3"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div> <hr> <h4>4.当元素存在自定义宽度与基准宽度时，以基准宽度为准</h4> <div class="container flex demo4"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.container{
border: 1px solid red;
background-color: rosybrown;
box-sizing: border-box;
width: 550px;
margin: 15px;
padding: 5px;
}
.flex{
display: flex;
}
.item{
border: 1px solid green;
}
/* 1.在未设置弹性元素宽度时，以内容宽度显示。属性值为content */
.demo1 > .item{
flex-basis: content;
}
/* 2.在设置弹性元素宽度时，以该宽度显示 */
.demo2 > .item{
width: 100px;
}
/* 3.自动状态下，由浏览器根据预设值自行判定 */
.demo3 > .item{
flex-basis: auto;
}
/* 4.当元素存在自定义宽度与基准宽度时，以基准宽度为准 */
.demo4 > .item{
/* 自定义宽度 */
width: 100px;
/* 预设的元素宽度 */
width: 150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.效果展示
四、简化弹性元素的基础设置
1.代码展示
实例
<h3>flex:简化弹性元素的基础设置</h3>
<h4>1.根据宽度计算，允许缩减适应容器</h4>
<div class="container flex demo1">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>2.根据宽度计算，元素完全弹性适应容器</h4>
<div class="container flex demo2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<hr>
<h4>2.元素失去弹性，以原始大小呈现</h4>
<div class="container flex demo3">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
.container{
border: 1px solid red;
background-color: salmon;
margin: 15px;
padding: 5px;
width: 550px;
}
.flex{
display: flex;
}
.item{
border: 1px solid green;
}
/* 1.根据宽度计算，允许缩减适应容器 */
.demo1> .item{
width: 100px;
height: 60px;
/* flex: 0 1 auto; */
flex: initial;
}
/* 2.根据宽度计算，元素完全弹性适应容器 */
.demo2> .item{
width: 100px;
height: 60px;
flex: 1 1 auto;
/* flex: auto; */
}
/* 2.元素失去弹性，以原始大小呈现 */
.demo3> .item{
width: 100px;
height: 60px;
flex: 0 0 auto;
/* flex: none; */
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.效果展示
3.总结
flex:增长因子 缩减因子 基准尺寸
flex：flex-grow flex-shrink flex-basis
flex:0 1 auto
五、align-self, order的用法
1、align-self属性的使用
align-self是控制交叉轴单独元素的排列方式，该属性和align-content align-items的区别是，前两者定义整体交叉轴所有元素排列，align-self 控制单独元素。
实例
<main>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</main>
body{
padding: 100px;
}
main{
display: flex;
flex-flow: row wrap;
width: 400px;
height: 200px;
box-sizing: border-box;
border: solid 3px lightyellow;
justify-content: space-evenly;
align-items: center;
}
main *{
width: 100px;
height: auto;
padding: 20px;
box-sizing: border-box;
background: lightgreen;
}
.item2{
background: lightcoral;
align-self:stretch运行实例 »
点击 "运行实例" 按钮查看在线实例
图中item1,item3已经被align-items居中，item2被align-self属性单独控制沾满一行。
2、order 属性的使用
order属性是针对flex弹性容器盒子的子元素排序产生的，元素定义了display:flex之后，可以使用order给子元素的显示顺序排列，并不会改变代码顺序。
order:[自定义序列]，只支持的整数，值可以是负数，排序为从小到大，数值越大，该元素排序越靠后。
所有元素的order属性默认值都是0，如果多个元素order值相同，并有小于该元素的order排序，那么相同的元素首先会排序到小于该order元素之后，然后相同的order元素按照代码先后顺序排序，不会有变化。
实例
<div class="order-box">
<div class="item1">item1<br>order:2</div>
<div class="item2">item2<br>order:1</div>
<div class="item3">item3<br>order:2</div>
<div class="item4">item4<br>order:0</div>
<div class="item5">item5<br>order:3</div>
</div>
.order-box{
display: flex;
border: solid 2px #eee;
padding: 20px;
width: 500px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
height: 200px;}.order-box > *{
width:100px;
height: 100px;
text-align: center;
color: #666;
box-sizing: border-box;
padding-top: 25px;}.order-box .item1{
background: lightcoral;
order:2;}.order-box .item2{
background: lightgoldenrodyellow;
order:1;}.order-box .item3{
background: lightblue;
order:2;}.order-box .item4{
background: lightgreen;
order:0;}.order-box .item5{
background: lightpink;
order:3;}运行实例 »
点击 "运行实例" 按钮查看在线实例
六、将之前的一些案例用flex布局改定, 例如圣杯布局
实例
<style type="text/css">main{
display: flex;
flex-flow: row wrap;
height: 300px;}header,footer{
height: 100px;
line-height: 100px;
background: #eee;
text-align: center;}main > *{
padding-top: 100px;
box-sizing: border-box;
text-align: center;}article{
background: lightcoral;
flex:1 1 auto;
order:1}aside{
background: lightgreen;
flex:0 0 auto;
flex-basis: 200px;
order:1}aside:first-of-type{
order:0}</style><header>Header标签</header><main>
<article>Article标签</article>
<aside>Aside标签</aside>
<aside>Aside标签</aside></main><footer>Footer标签</footer>运行实例 »
点击 "运行实例" 按钮查看在线实例
