flex布局详解

说明

后面的flex布局示例代码都会在此示例的flexTest样式上增加代码以做说明。

<!DOCTYPE html>
<html>
<head>
	<style>		
		.box{
			height:500px;
			width:700px;
			border: 1px solid gray;
		}
		
		.number{
			width:40px;
			text-align: center;
		}
		.number1{
			background-color: #009688;
			height:40px;
		}
		.number2{
			background-color: #eb064a;
			height:50px;
		}
		.number3{
			background-color: #9c27b0;
			height:60px;
		}
		.number4{
			background-color: #ebea06;
			height:70px;
		}
		.number5{
			background-color: #1cdd30;
			height:80px;
		}
        .flexTest{
            height:500px;
        }
	</style>
</head>

<body>
<div class="box">
	<div class="flexTest">
			<div class="number number1">1</div>
			<div class="number number2">2</div>
			<div class="number number3">3</div>
			<div class="number number4">4</div>
			<div class="number number5">5</div>
	</div>
</div>
</body>
</html>

效果如下：
在这里插入图片描述

display属性

设置 display: flex; 表示启用flex布局，只有启用了flex布局后续的其他flex属性才会生效，启用flex布局后里面的元素默认水平排列。

代码：

.flexTest{
	height:500px;
	display: flex;
}

在这里插入图片描述

flex-direction属性

flex-direction属性可取以下值：row(默认) 、row-reverse、column、column-reverse

说明：

row 横向从左往右排列，即项目排列顺序为正序1-2-3-4-5。row为默认值，即当启用flex布局后即使不设置flex-direction，flex-direction会默认为row

row-reverse 同为横向排列，但从右往左排列，即顺序为倒序5-4-3-2-1

column 为纵向从上往下排列，项目排列顺序为正序1-2-3-4-5

column-reverse 同为纵向排列，，但从下往上排列，即项目顺序为倒序5-4-3-2-1

以row-reverse为例：

		.flexTest{
			height:500px;
			display: flex;
			flex-direction: row-reverse;
		}

在这里插入图片描述

主轴与交叉轴

主轴和交叉轴的概念：

flex-direction设置为横向（row或row-reverse），则主轴为横向，交叉轴为纵向；

flex-direction设置为纵向（column或column-reverse），则主轴为纵向，交叉轴为横向；

（主轴和交叉轴，用于水平对齐和纵向两个对齐）

justify-content属性

justify-content属性控制主轴上的对齐方式

justify-content属性可取以下值：flex-start(默认) 、flex-end 、 center、 space-between 、space-around 、space-evenly;

说明：

flex-start：各元素在主轴上从起始处排列对齐。

flex-end：各元素在主轴上从结束处排列对齐。

center：各元素在主轴上居中对齐

space-between：第一元素在主轴上起始，最后一个元素在主轴上结束位置，其余元素项目评分中间空间

space-around：与space-between相似。区别是space-around属性的第一个元素之前和最后一个元素之后会有空白间隙，间隙等于每对相邻元素之间空间的一半。

space-evenly：与space-around相似。区别是space-evenly属性的所有元素之间的间隙是相等的。

.flexTest{
	height:500px;
	display: flex;
	flex-direction: row;
	justify-content:space-around;
}

在这里插入图片描述

align-items属性

align-items属性控制交叉轴上的对齐方式

align-items属性可取以下值：flex-start、 flex-end、center、baseline、stretch(默认)

说明：

flex-start、 flex-end、center是控制交叉轴上的对齐方式，对齐方式与上面justify-content里的同理。

baseline：元素以第一行文字的基线为参照进行排列。

stretch：align-items属性的默认值，如果元素未设置高度或设为auto，将占满整个容器的高度。（示例中每个数字所在的div都设置了高度，所以align-items设置为stretch不会占满）

		.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:center;
		}

flex-wrap属性

flex-wrap属性控制主轴上的元素满了后的换行（换列）方式

flex-wrap属性可取以下值：nowrap(默认) 、wrap 、 wrap-reverse

说明：

nowrap：默认值，主轴元素满了后不换行（不换列）

wrap：主轴元素满了后换行（换列）

wrap-reverse：主轴元素满了后换行（换列），换行后的行（列）在前

在原来的代码中，我们再增加14个数字5分别查看nowrap、wrap 、 wrap-reverse的效果。

nowrap：

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:flex-start;
			flex-wrap:nowrap;
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK3Pd0Yt-1637051055438)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143500278.png)]$

wrap ：

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:flex-start;
			flex-wrap:wrap;
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8gLRdKQ-1637051055440)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143522962.png)]$

wrap-reverse：

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:flex-start;
			flex-wrap:wrap-reverse;
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtHlc940-1637051055442)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143557641.png)]$

flex-flow属性

flex-flow属性是flex-direction和flex-wrap的合写形式，第一个值代表flex-direction，第二个值代表flex-wrap

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
			justify-content:space-around ;
		}

相当于

		.flexTest{
			height:500px;
			display: flex;
			flex-flow:row wrap;
			justify-content:space-around ;
		}

align-content属性

align-content属性控制交叉轴上的多行（多列）对齐方式。如果只有行（列），该属性不起作用。

align-content属性可取以下值：flex-start、 flex-end、 center、 space-between、 space-around、 stretch(默认);

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:flex-start;
			flex-wrap:wrap;
			align-content:flex-start;
	}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3RD5izb-1637051055443)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116144828361.png)]$

align-self属性

align-self属性用于具体元素交叉轴上的对齐方式

align-self属性可取以下值：auto(默认)、flex-start、flex-end、 center、baseline、stretch

说明：

auto：表示继承父容器的align-items属性。如果没父元素，则默认stretch。

对数字5单独进行交叉轴上对齐：

.number5{
		background-color: #1cdd30;
		height:80px;
		align-self:flex-end;
}
.flexTest{
		height:500px;
		display: flex;
		flex-direction: row;
		justify-content:space-around ;
		align-items:flex-start;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RE6yluKD-1637051055444)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116151254744.png)]$

order属性

order属性定义在具体元素上，用于排列顺序。数值越小，排列越靠前，默认为0。

.number3{
		background-color: #9c27b0;
		height:60px;
		order:4;
}
.number4{
		background-color: #ebea06;
		height:70px;
		order:3;
}
.number5{
		background-color: #1cdd30;
		height:80px;
		order:1;
}

因为数字1、2默认为order为0，数字3 order设为了4，数字4 order设为了3，数字3 order设为了1。因为order越小优先级越靠前，所以排列结果如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zNMJFeoK-1637051055445)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116150226387.png)]$

flex-grow属性

flex-grow属性定义元素的放大比例，默认为0（即如果存在剩余空间，也不放大），负数无效。

注意，即便设置了固定宽度，设置flex-grow大于0后，也会放大。

如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个元素的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他元素多一倍。

		.number5{
			background-color: #1cdd30;
			height:80px;
			flex-grow:1;	
		}
		
		.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			justify-content:space-around ;
			align-items:flex-start;
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5IeGc5rx-1637051055446)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116152633908.png)]$

flex-shrink属性

flex-shrink 属性定义项目的收缩比例，默认为1。即如果主轴满了的话会收缩。当存在剩余空间，不会收缩。负值对该属性无效。
flex-shrink属性为0，表示该元素不收缩。
flex-shrink属性越大，元素收缩越多。

flex-basis属性

flex-basis 属性定义项目的宽度，相当于width。默认为auto。

如果同时设置了width和flex-basis，flex-basis权重会比width属性高，因此会覆盖widtn属性。

		.number5{
			background-color: #1cdd30;
			height:80px;
			flex-basis:100px;
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8mLmOTd-1637051055447)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116153752759.png)]$

flex属性

flex属性是用于flex-grow、flex-shrink、flex-basis属性的合并写法

例如：

.number5{
			background-color: #1cdd30;
			height:80px;
			flex-grow:1;
			flex-shrink:1;
			flex-basis:auto;
		}

相当于

.number5{
			background-color: #1cdd30;
			height:80px;
			flex:1 1 auto;
		}

该属性有两个快捷值：flex:auto;相当于(1 1 auto) 和 flex:none;相当于(0 0 auto)。
建议优先使用auto属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

row-gap与column-gap属性

row-gap和column-gap属性用于设置横向与纵向各元素间的间隔空间

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
			justify-content:space-around ;
			row-gap: 10px;
			column-gap: 20px;
		}

gap属性

gap属性是row-gap和column-gap的合写形式

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
			justify-content:space-around ;
			row-gap: 10px;
			column-gap: 20px;
		}

相当于

.flexTest{
			height:500px;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
			justify-content:space-around ;
			gap: 10px 20px;
		}

其他示例

.number4{
		background-color: #ebea06;
		height:70px;
		margin-left:auto
	}
.flexTest{
		height:500px;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-start ;
	}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFCES3pO-1637051055449)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116162329152.png)]$

参考：
Basic concepts of flexbox
Aligning Items in a Flex Container
Flex 布局教程：语法篇
 A Complete Guide to Flexbox
一篇文章弄懂flex布局
 Layout Demos

目录

说明

display属性

flex-direction属性

主轴与交叉轴

justify-content属性

align-items属性

flex-wrap属性

flex-flow属性

align-content属性

align-self属性

order属性

flex-grow属性

flex-shrink属性

flex-basis属性

flex属性

row-gap与column-gap属性

gap属性

其他示例