flex布局

最新推荐文章于 2023-08-09 21:42:54 发布

Debris丶

最新推荐文章于 2023-08-09 21:42:54 发布

阅读量400

点赞数

分类专栏：前端文章标签： flex布局前端布局

本文链接：https://blog.csdn.net/qq_34377830/article/details/93399001

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在最近小程序的学习中，几乎都是flex布局，所以趁机会学习一下flex布局~

flex container和flex item：

这两个概念其实很简单，就是一个div里面嵌套多个子div，此时外层的div就可以看作是flex container，而该div下的直接子div可以看作是flex item。

<html>
	<head>
		<title>flex布局</title>
		<style>
			.container {
				width: 500px;
				height: 500px;
				border: 1px solid #000;
			}
			
			.item1 {
				width:200px;
				height:200px;
				background-color: green;
			}
			
			.item2 {
				width:200px;
				height:200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item1">1</div>
			<div class="item2">2</div>
		</div>
	</body>
</html>

一般来说，如果需要使用flex布局，那么就需要有flex container和flex item。
在上面代码中，暂时没有使用到flex布局，此时的效果如下图所示：
在这里插入图片描述
可以看到，内层的两个div都是块状元素，因此每个div都占了一行。

接着，给container设置display属性为flex，再看一下效果：

.container {
	width: 500px;
	height: 500px;
	border: 1px solid #000;
	display: flex;
}

效果如下：
在这里插入图片描述
可以看到，此时container内部的两个div不再是块状元素了，而变成了行内块元素。

flex-direction

如果希望内部的两个div垂直排列，可以设置container的flex-direction属性为column，这个属性的默认值是row，因此在没有设置该属性的时候，item会自动进行行排列。

.container {
	width: 500px;
	height: 500px;
	border: 1px solid #000;
	display: flex;
	flex-direction: column;
}

此时的效果图如下：
在这里插入图片描述
flex-direction除了row和column两个取值外，还有row-reverse和column-reverse两个取值，从字面意思可以看出，这两个取值分别是将container内部的item按照行倒序的和列倒序的方式进行排序。

这里以column-reverse为例，将container的flex-direction的值设置为column-reverse，可以看到以下的效果：
在这里插入图片描述
从图中可以看到，container内部的item是从后往前进行分布的，也就是第一个div会最后一个显示，第二个div倒数第二个显示，以此类推。同时，它是以下为基准，依次向上排列。

主轴和交叉轴

主轴和交叉轴可以看作是二维平面的一对坐标系，在传统的画图中，都会将水平向右当做是x轴（主轴），垂直于x轴向上的作为y轴（交叉轴）。

在flex布局中，主轴和交叉轴并不是固定不变的，而是根据flex-direction的不同取值进行变化的。

当flex-direction的值为row时，主轴方向如图所示，此时交叉轴垂直于主轴向下：
在这里插入图片描述

当flex-direction的值为row-reverse时，主轴方向如图所示，此时交叉轴垂直于主轴向下：
在这里插入图片描述

当flex-direction的值为column时，主轴方向如图所示，此时交叉轴垂直于主轴水平向右：
在这里插入图片描述

当flex-direction的值为column-reverse时，主轴方向如图所示，此时交叉轴垂直于主轴水平向右：
在这里插入图片描述

justify-content和align-items

justify-content是用来设置主轴上对齐方式的，相反地，align-items用来设置交叉轴的对齐方式。

justify-content和align-items有几个共同的取值：center（居中）、flex-start、flex-end。

这里选择flex-end进行说明，flex-start与flex-end相反。

之前编写的container的flex-direction属性是column-reverse，因此它的起点是下方，主轴向上，交叉轴向左。

此时设置justify-content为flex-end：

.container {
	width: 500px;
	height: 500px;
	border: 1px solid #000;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

效果如下：
在这里插入图片描述
可以看到，此时第二个div在主轴上并不是以下方作为起点，而是以上方作为起点。因此可以看出，flex-end就是调整对齐的起点。flex-start是这个属性的默认值。

justify-content还有几个其他的取值，包括：space-between（平均分布）、space-around（等距分布）等等。

align-items也有几个其他取值，包括：stretch（拉伸）、baseline（让子元素中的文字底部对齐）等等。

总结

在学习flex布局的过程中，最主要的就是需要搞清楚主轴和交叉轴的方向，这样才能对相关的CSS属性进行正确的取值。

Debris丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局

在最近小程序的学习中，几乎都是flex布局，所以趁机会学习一下flex布局~flex container和flex item：这两个概念其实很简单，就是一个div里面嵌套多个子div，此时外层的div就可以看作是flex container，而该div下的直接子div可以看作是flex item。<html> <head> <title>flex布...
复制链接

扫一扫