Flex布局

CSS2传统的盒模型采用float – position布局方式。【PC端】
CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】

盒模型分类

盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式

Flex布局的术语

在这里插入图片描述

Flex Container：Flex容器。
启用了弹性盒布局（display:flex;）的块级元素被称为Flex容器。
Flex Item：Flex项目。
Flex容器内部的子块级元素。
（1）Main Size，Flex项目在主轴方向上所占的宽度。
（2）Cross Size，Flex项目在交叉轴方向上所占的高度。
Main Axis：Flex容器的主轴，主轴默认情况下是指水平轴。
（1）Main Start，主轴的起始位置。
（2）Main End，主轴的结束位置。
Cross Axis：Flex容器的交叉轴，也被称为“侧轴”，侧轴默认情况下是指垂直轴

（1）Cross Start，交叉轴的起始位置。
（2）Cross End，交叉轴的结束位置。
注意：启用了Flex技术之后，float、clear、vertical-align都不可用。

场景

在小程序及移动端开发中，需要考虑各种尺寸终端设备上的适配。
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现
比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中，这种情况下，建议用flex布局
在这里插入图片描述
不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中：

display设置盒模型
justify-content盒模型水平方向对齐方式
.container{ display:flex; flex-decoration:column; justify-content:center;}

作用在Flex Container之上的CSS3中的Flex布局属性

启用Flex布局的方式：display:flex;
（1）Flex Item在Flex Container中默认沿主轴排列。
（2）Flex Item在Flex Container中默认情况下不允许换行。
若Flex Container的宽度小于所有Flex Item的宽度总和，则各个Flex Item将按照
原始宽度的比例平均分割Flex Container的宽度。
（3）在主轴排列的Flex Item必须具备宽度或放大比例（flex-grow），可以不写高度或高
度取值为auto。

常见的父项属性

1. flex-direction：设置主轴的方向。

取值：
（1）row-默认值，表示主轴的方向为水平方向。【相当于float:left;】
（2）row-reverse，表示主轴的方向为水平方向的反方向。【相当于float:right;】
（3）column，表示主轴的方向为垂直方向，主轴和交叉轴发生了交换。
（4）column-reverse，表示主轴的方向为垂直方向的反方向。

2. justify-content：设置Flex Item在Flex Container中的主轴对齐方式。

取值：
（1）flex-start，默认值，Flex Item在Flex Container中沿着主轴的起始位置对齐。
（2）flex-end，Flex Item在Flex Container中沿着主轴的结束位置对齐。
（3）center，Flex Item在Flex Container中沿主轴居中对齐。
（4）space-between，在Flex Container中平均分布Flex Item，所有的Flex Item之间
的间隔是一致的。
（5）space-around，在Flex Container中平均分布Flex Item，所有的Flex Item的两
端的距离是一致的。
（6）space-evenly，项目间间距，第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

3. align-items：设置Flex Item在Flex Container中的交叉轴对齐方式。

取值：
（1）flex-start，Flex Item在Flex Container中沿着交叉轴的起始位置对齐。
（2）flext-end，Flex Item在Flex Container中沿着交叉轴的结束位置对齐。
（3）center，Flex Item在Flex Container中沿交叉轴居中对齐。
（4）stretch，默认值，Flex Item在Flex Container中拉伸对齐。
当Flex Item不规定height或height:auto时，Flex Item的高度和Flex Container
等高。
（5）baseline，各个Flex Item相对于基线对齐。
A .若Flex Item内部没有任何文本内容，则Flex Item在Flex Container的顶端
且各个Flex Item之间底部对齐。
B .若Flex Item内部具备文本内容，则各个Flex Item相对于文本基线对齐

4. flex-wrap：设置Flex Item在Flex Container中是否允许换行显示。

取值：（1）nowrap，默认值，不允许换行。
（2）wrap，允许在Flex Container宽度小于各个Flex Item总和的情况下换行。
（3）warp-reverse，允许换行且在垂直方向反向布局。

5. align-content：设置多主轴情况下Flex Item相对于交叉轴的对齐方式。

如何实现多主轴效果：（1）Flex Container的宽度小于所有Flex Item宽度之和。
（2）允许换行。
取值：（1）flex-start，多根主轴在交叉轴方向上对于交叉轴起始位置对齐。
（2）flex-end，多根主轴在交叉轴方向上对于交叉轴结束位置对齐。
（3）center，多跟主轴在交叉轴方向的中心对齐。
（4）stretch，默认值，拉伸对齐。
（5）space-between，多根主轴之间的间距是一致的。
（6）space-around，每根主轴两侧之间的距离是一致的。
（7）space-evenly，行间间距，以及首行离交叉轴七点和尾行离交叉轴终点距离相等。
align-content与align-items比较类似，同时也比较容易迷糊。
首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。
对比：

区别：
在属性值上，align-content比align-items多了两个值：space-between和space-around

6. 复合属性

flex-flow 属性（作用在Flex Container上的复合属性）：
相当于direction和wrap的集合
flex-flow: row nowrap;/* 默认值，顺序排列且不换行 /
flex-flow:row-reverse wrap;/ 反序排列且自动换行 */

作用在Flex Item(子项目）之上的CSS3中的Flex布局属性

1、flex属性

定义子项目分配剩余空间，用flex来表示占多少份数
可以用数字表示，也可以用百分比表示。

flex:  <number>; // flex 的值是数字
flex:1;

2、flex-basis：设置Flex Item所占的Main Size（主轴空间大小）。项目width属性替代品

取值：
（1）带有单位的数值。
（2）百分比。
A .若Flex Container允许换行，则100%将占据Flex Container的整宽。
B .若Flex Container不允许换行，则100%将占据Flex Container剩余的宽度。
（3）auto，默认值，Flex Item所占主轴空间大小以width属性为准。若没有设置
width属性，则该取值无效。
若width和flex-basis同时存在且取值冲突，则Flex Item以flex-basis为准。

flex-basis属性： •
当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
•
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
• 需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

3、order：设置Flex Item在Flex Container中的显示顺序（沿主轴方向上的排列顺序）。

取值：
（1）0，按照Flex Item在Flex Container中的代码书写顺序排列。
（2）不带单位的整数，根据整数的升序进行排列。

4、align-self，设置特定的Flex Item相对于交叉轴自身的对齐方式。
取值：
（1）auto，默认值，依照align-items所设置的属性进行交叉轴对齐，当容器没有设置align-item时，属性值为stretch。
（2）flex-start
（3）flex-end
（4）center
（5）baseline
（6）stretch
5、flex-grow：设置Flex Item在Flex Container中的放大比例（项目的扩张因子）。

取值：
（1）0，默认值，当Flex Container有空余位置时，Flex Item不发生放大效果。
（2）不带单位的整数，表示当Flex Container有空余位置时，Flex Item的放大比
例。
扩张因子flex-grow：
• 场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。
• 取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

6、 flex-shrink：设置Flex Item在Flex Container中的缩小比例（项目的收缩因子）。
取值：
（1）1，默认值，表示若空间不足，则Flex Item缩小。
（2）0，表示若空间不足，则Flex Item也不缩小。
flex-shrink 作用：
• 当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
• 未设置flex-shrink时，默认flex-shrink值为1。

** 7、复合属性**

flex属性（作用在Flex Item上的复合属性，简单了解即可）：
flex-grow、flex-shrink、flex-basis的简写模式
取值：
（1）none，等价于0 0 auto；
（2）auto，等价于1 1 auto；
经典案例-骰子模型

<div class="demo">
			<div class="box box1">
				<div class="dot"></div></div>
			<div class="box box2">
				<div class="dot"></div>
			</div>
			<div class="box box3">
				<div class="dot"></div>
			</div>
			<div class="box box4">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box5">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box6">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box7">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box8">
				<div class="dot"></div>
			</div>
			<div class="box box9">
				<div class="dot"></div>
			</div>
			<div class="box box10">
				<div class="dot"></div>
			</div>
			<div class="box box11">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box12">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box13">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			<div class="box box14">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box15">
				<div class="dot"></div>
			</div>
			<div class="box box16">
				<div class="dot"></div>
			</div>
			<div class="box box17">
				<div class="dot"></div>
			</div>
			<div class="box box18">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box19">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box20">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box21">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

.demo{
    
    
	width: 920px;
	height: 400px;
	border: 1px solid gray;
	display: flex;
	flex-wrap: wrap;
}
.box{
    
    
	width: 120px;
	height: 120px;
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
	display: flex;
	margin: 5px;
}
.dot{
    
    
	width: 30px;
	height: 30px;
	background: #F5F5F5;
	border-radius: 50%;
}
.dot1{
    
    
	width: 30px;
	height: 30px;
	background: transparent;
	border-radius: 50%;
}

.box2{
    
    
	flex-direction: row;
	justify-content: center;
}
.box3{
    
    
	justify-content: flex-end;
}
.box4{
    
    
	justify-content: space-between;
}
.box5{
    
    
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
.box6{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box6 .row{
    
    
	width: 100%;
	display: flex;
}
.box6 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box6 .row:nth-of-type(3){
    
    
	justify-content: flex-end;
}
.box7{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box7 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box7 .row:nth-of-type(2){
    
    
	justify-content: center;
}


.box8{
    
    
	flex-direction: column;
	justify-content: center;
}
.box9{
    
    
	justify-content: center;
	align-items: center;
}
.box10{
    
    
	justify-content: flex-end;
	align-items: center;
}
.box11{
    
    
	flex-direction: column;
	justify-content: space-between;
}
.box12{
    
    
	justify-content: space-between;
	align-items: flex-end;
}
.box13{
    
    
	justify-content: space-between;
}
.box13 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box14{
    
    
	justify-content: space-between;
}
.box14 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.box15{
    
    
	flex-direction: column;
	justify-content: flex-end;
}
.box16{
    
    
	align-items: flex-end;
	justify-content: center;
}
.box17{
    
    
	align-items: flex-end;
	justify-content: flex-end;
}
.box18,.box19{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box18 .row,.box19 .row{
    
    
	width: 100%;
	display: flex;
}
.box18 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box19 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box20{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box20 .row{
    
    
	width: 100%;
	display: flex;
}
.box20 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box21{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box21 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box21 .row:nth-of-type(2){
    
    
	justify-content: center;
}

略有删改
————————————————
本文为CSDN博主「web_zsh」的原创文章
原文链接：https://blog.csdn.net/web_only_/article/details/100707608

css的Flex布局