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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值