弹性盒子与弹性布局-杨标的博客

弹性盒子与弹性布局

之前在进行网页布局的时候，我们有流式布局，在流式布局里面我们分为标准流布局与脱流布局，这一种最常见的布局方式，也是一种兼容性非常高的布局方式，多半都使用在PC端进行布局

随时布局要求的越来越来高，浏览器对W3C的标准支持度越来越好，所以后面又出现了另外的几种布局方式，分别如下

布局规范及分类

要弄清楚弹性布局则必须先弄清楚弹性盒子

弹性盒子的属性

display:flex将盒子变成弹性盒子。一个盒子如果一旦变成弹性盒子以后，内部默认就会有两根轴，分别是row横轴与column纵轴【其中必定会一根轴是主轴，另一根是副轴】

既然是一个弹性盒子，那么这个盒子的内部肯定会有弹性

弹性盒子内部的元素默认会沿着这个弹性的方向进行排列。这个弹性的方向我们就叫主轴,非弹性的方向向副轴
flex-direction设置弹性盒子内部弹性的方向，也叫设置弹性盒子主轴方向
- row横向【默认值】
- column纵向
- row-reverse
- column-reverse
justify-content设置弹性盒子内部元素的主轴方向排列
- flex-start弹性开始的方向【默认值】
- flex-end弹性结束的方向
- center居中
- space-between空格隔开
- space-around空格环绕
- space-evenly中间的空间平均隔开
space-between space-around space-evenly
align-items设置弹性盒子内部元素的副轴方向排列

该属性主要使用于主轴没有换行的情况
- flex-start副轴弹性开始的方向
- flex-end副轴的弹性结束方向
- center居中
- baseline基线对齐
- stretch拉伸【默认值】
flex-wrap弹性盒子内部的主轴方向是否允许换行
- nowrap不允许换行
- wrap当主轴方向排列不下的时候会出现折行的现象
flex-flow这个属性是flex-direction与flex-wrap的综合属性，第一个属性值代表弹性方向（主轴方向），第二个代表主轴是否换行
```
flex-direction:row;
flex-wrap:wrap;
/*等价于*/
flex-flow:row wrap;
```
align-content多主轴设置（也叫副轴上面的主轴设置）

该属性主要用于主轴出现了折行以后使用
- flex-start弹性开始
- flex-end弹性结束
- center居中
- space-between空格隔开
- space-around空格环绕
- space-evenly空格平均分
- stretch拉伸

align-self单独设置当前元素的副轴排列，它的属性值与align-items保持一致
order用于设置子级元素在主轴上面的排列，根据从小到大的顺序进行排列，默认值是0

order的数值越大就排在弹性的尾部
flex该属性是设置元素在主轴方向占剩余空间的比例。该属性非常重要，它适用于弹性布局里面的页在的盒子的大小切割

其中1_{7个属性是设置在弹性盒子上面的，8}10个属性是设置在弹性盒子内部子元素上面的

当把上面的弹性盒子10个属性学完了以后，我们就可以通过弹性盒子游戏学习这个网站来学习一下弹性盒子的基本布局练习了

弹性盒子的影响

当一个标准的盒子如果变成弹性盒子以后会有哪些特征呢？

对当前元素的影响

会形成一个BFC，没有margin的穿透现象
主轴方向的overflow无效

对内部子元素的影响

子元素宽度丢失，不再是100%，由内容去撑开
子元素无视元素类型，最终都会变成block块级状态，可以设置width/height
子元素不允许使用float浮动，但是可以使用position定位

当弹性布局与定位布局结合的时候，默认是听弹性布局的【因为定位是在当前位置直接脱流，不主动调整位置】，如果定位的元素使用了left/right/top/bottom则以定位为标准
子元素与子元素之间不允许使用<br>标签换行
可以通过flex属性拉开主轴的的大小

弹性盒子属性的封装

在使用弹性盒子对页面进行布局的时候，我们经常会使用到弹性盒子的一些属性与属性值，为了操作方便，我们会将常用的属性与必性值来进行一个封装，如下所示

.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.j-c {
	justify-content: center;
}
.j-s-b {
	justify-content: space-between;
}
.j-s-a {
	justify-content: space-around;
}
.a-c {
	align-items: center;
}

在使用这种方式封装以后进行页面布局的时候会非常方便，同时阅读网页结构的时候也更直观

<div id="app" class="flex-column">
    <div class="tab-bar flex-row j-c a-c">
        <span class="left-back">&lt;</span>
        设置
    </div>
    <div class="content-box">
        <ul class="menu">
            <li class="menu-item flex-row a-c">
                <div class="left">
                    <img src="img/xinxi.png">
                </div>
                <div class="center">人个信息</div>
                <div class="right">&gt;</div>
            </li>
        </ul>
    </div>
</div>

弹性盒子收缩值计算

flex-shink属性主要是在外层div宽度不够的情况下，子div收缩一定的空间来抵消不够的那部分宽度。

请看下面的代码

<div class="box">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
</div>

上面的代码我们定义了一个大盒子，然后在大盒子里面，我们添加了4个小盒子，分别为a,b,c,d四个，接下来，我们通过CSS来设置它们的样式

.box{
	width: 300px;
	height: 100px;
	border: 1px solid black;
	display: flex;
}
.box>div{
	height: 100%;
	font-weight: bold;
}
.a{
	width: 140px;
	background-color: pink;
	flex-shrink: 1;
}
.b{
	width: 100px;
	background-color: lightskyblue;
	flex-shrink: 1;
}
.c{
	width: 100px;
	background-color: lightcyan;
	flex-shrink: 1;
}
.d{
	width: 120px;
	background-color: lightsalmon;
	flex-shrink: 2;
}

通过上面的CSS设置以后，我们可以得到下面的效果图

这个时候就要注意了，因为小盒子的总宽度是超过了外边的大盒子的，小盒子就会被压缩，那么，小盒子最终的宽度是多少，是如何压缩的呢

我们先来计算a的盒子，也就是第1个盒子

第一步:计算空间还差多少
(140+100+100+120) - 300 = 160
第二步:计算自已需要收缩的比例
140*1/(140*1+100*1+100*1+120*2) = 0.2413
第三步:计算自己需要收缩的值
160 * 0.2413 =38.620
第四步:计算自己剩下多少
140 - 36.29 = 101.37

经过上面的计算以后，我们可以看到，第1个盒子a最终的宽度约为101.37

经过上面的计算以后，我们到底计算得是否正确还不能确定，我们再使用上面的步骤来计算一下最后一个盒子试一下

我们先来计算d的盒子，也就是第4个盒子

第一步:计算空间还差多少
(140+100+100+120) - 300 = 160
第二步:计算自已需要收缩的比例
120*2/(140*1+100*1+100*1+120*2) = 0.4137
第三步:计算自己需要收缩的值
160 * 0.4137 =66.2068
第四步:计算自己剩下多少
120 - 55.1724 = 53.79

经过上面的计算以后，我们可以看到，第4个盒子d最终的宽度约为53.79

弹性盒子的收缩与弹性盒子的扩展计算方式是一样的

弹性盒子的扩张值计算

经过上面的学习以后，我们已经知道，如果弹性盒子内部的元素宽度大于外部元素宽度的时候，就会出现压缩。同理，当内部元素的宽度小于外部元素的宽度时，我们可以通过 flex-grow来设置弹性盒子的扩展值

弹性盒子具体的扩展值应该通过下面的方式来进行计算，我们现在通过一个案例来学习一下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>弹性盒子扩展计算</title>
	<style>
		.box{
			width: 400px;
			height: 100px;
			border: 1px solid black;
			display: flex;
		}
		.box>div{
			height: 100%;
		}
		.a{
			width: 100px;
			flex-grow: 1;
			background-color: pink;
			/*
				第一步:计算多了多少
				400-100-80-80 = 140
				第二步:计算自己的扩展比例
				1 / (1+2+1) = 0.25
				第三步:计算自己扩展多少
				140 * 0.25 = 35
				第四步:计算自己最终值
				100 + 35 = 135

			*/
		}
		.b{
			width: 80px;
			flex-grow: 2;
			background-color: cadetblue;
			/*
				第二步:计算自己的扩展比例
				2 / (1+2+1) = 0.5
				第三步:计算自己扩展多少
				140 * 0.5 = 70
				第四步:计算自己最终值
				80 + 70 = 150
			*/
		}
		.c{
			width: 80px;
			flex-grow: 1;
			background-color: coral;
			/*
				第二步:计算自己的扩展比例
				1 / (1+2+1) = 0.25
				第三步:计算自己扩展多少
				140 * 0.25 = 35
				第四步:计算自己最终值
				80 + 35 = 115
			*/
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="a">1</div>
		<div class="b">2</div>
		<div class="c">3</div>
	</div>
</body>
</html>

在上面的图片里面，我们可以看到，盒子最终出现了扩展，具体的计算过程，我们在代码里面也列出来了

弹性盒子扩张值的计算比弹性盒子收缩值的计算要简单一些

弹性盒子所引出的知识点

设置全屏盒子

弹性盒子的主要布局场景在移动端，在移动端里面，我们经常要设置一个全屏的DIV盒子

采用固定定位的方式

#app{
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: deeppink;
    width: 100%;
    height: 100%;
}

将html,body都设置为100%

html,body,#app{
    width: 100%;
    height: 100%;
}
#app{
    background-color: deeppink;
}

使用vw/vh单位进行设置

#app{
    /* vw全称viewport width */
    /* 设备宽度的100% */
    width: 100vw;
    /* vh全称viewport height */
    /* 设备高度的100% */
    height: 100vh;
    background-color: deeppink;
}

在非标准标式下面网页高度默认就是浏览器高度

直接去注释掉<!DOCTYPE html>
```
#app{
    width: 100%;
    height: 100%;
    background-color: deeppink;
}
```

弹性盒子的页面切割

之前的流式布局里面，我们可以使用定位或属性值计算(calc)实现页面切割，在弹性盒子里面，我们也可以轻松的去实现页面切割

无论是之前的三栏式布局还是我们做练习的时候的微信上下栏布局都可以通过弹性盒子来完成

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #app{
        width: 100vw;
        height: 100vh;
        background-color: deeppink;
        display: flex;
        flex-direction: column;
    }
    .content-box{
        background-color: lightgray;
        flex: 1;
        /*通过这个flex属性可以拉开轴上面的大小，也就是拉开高度*/
    }
    .tab-bar{
        height: 55px;
        background-color: white;
    }
</style>
<div id="app">
    <div class="content-box">中间内容部分</div>
    <div class="tab-bar">底部的</div>
</div>

flex这个属性只能在弹性盒子的子元素上面使用。也就是说如果要使用这个属性，它的父级必须是一个弹性盒子

弹性盒子切割三栏式布局

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #app{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 110px;
        width: 100%;
        background-color: lightblue;
    }
    .bottom{
        flex: 1;
        display: flex;
        flex-direction: row;

    }
    .left{
        width: 230px;
        height: 100%;
        background-color: #FFB6C1;
    }
    .right{
        background-color: blue;
        flex: 1;
        /* flex:1是拉开了主轴的大小，也就是拉开了宽度
        为什么高度也拉开了
        原因是因为弹性盒子默认的副轴设置是align-items:stretch    
        */
    }
</style>
<div id="app">
    <div class="top"></div>
    <div class="bottom">
        <div class="left"></div>
        <div class="right">右边</div>
    </div>
</div>

像这样的三栏式布局是先切割上下，再切割了左右

弹性盒子引伸出的移动端布局

弹性盒子主要是应用于移动端布局，在移动端布局里面，我们有一些注意事项需要去完成

需要添加移动端的网页元素信息meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">

viewport代表的是视口，也就是指网页的输出显示
width=device-width用于设置视口宽度就是设备宽度，也就是指网页的宽度就是设备的宽度
initial-scale=1.0代表网页的初始缩放是1.0
user-scalable=no代表不允许用户对网页进行缩放
minimum-scale=1代表网页的最小缩放是1.0
maxinum-scale=1代表网页的最大缩放是1.0

目录CONTENT

弹性盒子与弹性布局