弹性布局 flex属性

最新推荐文章于 2024-06-10 15:38:55 发布

借汝之光，得以光明

最新推荐文章于 2024-06-10 15:38:55 发布

阅读量2.5k

点赞数 1

分类专栏： Web前端开发文章标签： flex justify-content align-content align-self align-items

本文链接：https://blog.csdn.net/weixin_44588495/article/details/95625535

版权

Web前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 使用弹性盒子布局

html+css的布局有很多种比如：float和inline-block这种布局，但是这种布局的有很大的缺点。css3新增了弹性布局。这也是当今最主流的布局方式之一。

2 使用flex类型的盒模型（display:flex）

该模型有如下几种属性：
flex-flow：这是一个复合属性，由flex-flow和flex-direction组成。
flex-direction：指定弹性盒子内子元素的排列方向。
flex-wrap：指定弹性盒子内子元素的换行方式。
order：作用于子元素，指定子元素的排列顺序。
align-items：作用于弹性盒子，用于控制子元素的对齐方式。
align-self：作用于子元素，控制子元素自身的对齐方式。
justify-content：作用于子元素，用于控制子元素自身在排列方向上的分布方式。
align-content：作用于弹性盒子，用于控制子元素在排列方向上的分布方式。

简单示例

<style>
		.container{
			display: flex;
			width:960px;
			text-align: left;
		}
		.container>div{
			border:1px solid black;
			box-sizing: border-box;
			padding: 5px;
		}
</style>
</head>
<body>
	<div class="container">
		<div style="width:200px;">html+css的布局有很多种比如：float和inline-block这种布局，但是这种布局的有很大的缺点。css3新增了弹性布局。这也是当今最主流的布局方式之一。</div>
		<div style="width:500px;">html+css的布局有很多种比如：float和inline-block这种布局，但是这种布局的有很大的缺点。css3新增了弹性布局。这也是当今最主流的布局方式之一。</div>
		<div style="width:240px;">html+css的布局有很多种比如：float和inline-block这种布局，但是这种布局的有很大的缺点。css3新增了弹性布局。这也是当今最主流的布局方式之一。</div>
	</div>

在网页中显示：

在这里插入图片描述
这里就是用到了弹性盒子布局，浏览器会自动把三个div排成一行，并且上下对齐，如果是inline-block模型，就会出现这种情况：

接下来会分别演示这些属性的作用。

3 通过flex-direction指定盒子内元素的排列方式

这里面由四个属性值：
row：横向从左到右。
row-reverse：横向从右到左。
column：纵向从上到下。
column-reverse：纵向从下到上。
示例：

<style>
		.container{
			width:600px;
			text-align: left;
			display: flex;
			border:1px solid black;
			height:140px;
			flex-direction: column;
		}
		.container>div{
			border:1px solid black;
			box-sizing: border-box;
			padding: 5px;
		}
</style>
</head>
<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

在这里插入图片描述
默认是左右布局，现在为上下布局。

4 通过flex-wrap换行

属性值:

nowrap：不换行。默认值
wrap：换行。
wrap-reverse：反向换行。
示例

<style>
		.container{
			width:600px;
			text-align: left;
			display: flex;
			border:1px solid black;
			height:140px;
			flex-wrap: wrap;
		}
		.container>div{
			border:1px solid black;
			box-sizing: border-box;
			width:210px;
		}
</style>
</head>
<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

在这里插入图片描述

5 order设置子元素的排列顺序

这里的order值越大，元素位置偏后。

<style>
		.container{
			width:600px;
			text-align: left;
			display: flex;
			border:10px solid black;
			height:140px;
		}
		.container>div{
			border:1px solid black;
			box-sizing: border-box;
			width:210px;
		}
</style>
</head>
<body>
	<div class="container">
		<div style=" order:3">1</div>
		<div style=" order:2">2</div>
		<div style=" order:1">3</div>
	</div>

在这里插入图片描述

6 通过flex属性控制子元素的缩放

flex：这是一个复合的属性，里面包括了flex-grow、flex-shirink和flex-basis。如果写flex:2，相当于flex:2 2 0，第一个参数是flex-grow，第二个参数是flex-shrink，第三个参数是flex-basis。
flex-grow：指定容器内各子元素的拉伸因子。默认值为0。这意味着子元素不会被拉伸。
flex-shirink：指定容器内各子元素的收缩因子。默认值为0。这意味着子元素不会被收缩。
flex-basis：指定容器内各子元素缩放之前的基准大小。

这里有一个计算公式：

各子元素的宽度为：

基准宽度+（父容器宽度-所有各子元素宽度和）* 该元素的flex-grow/所有子元素。
这里是不设置缩放的情况。

<div class="container">
	<div style="flex-grow: 1;">1</div>
	<div style="flex-grow: 2;">2</div>
	<div style="flex-grow: 3;">3</div>
</div>

在这里插入图片描述
解析：原本子元素无法填充满父级元素，当设置flex-grow时这里的空白区域等比例分成六份，给第一个div1份，第二个2份，第三个三份，从而充满整个父级。同理可得flex-shrink缩放也是一样的道理，分割的是超出部分。不光可以设置宽度，也可以设置高度。

flex-basis属性：该属性可以设置子元素的基本宽度或者高度，如果css中指定了子元素的宽度和高度，依然会按照设置的flex-basis中的值指定显示的高度或者宽度，看如下代码。

<style>
		.container{
			width:600px;
			text-align: left;
			display: flex;
			border:10px solid black;
			height:140px;
		}
		.container>div{
			border:1px solid black;
			box-sizing: border-box;
			width:200px;
			flex-basis: 80px;
		}
</style>
</head>
<body>
	<div class="container">
		<div style="flex-grow: 1;">1</div>
		<div style="flex-grow: 2;">2</div>
		<div style="flex-grow: 3;">3</div>
	</div>

如果按照宽度是80px，那么将有空白，但是结果却是这样的。说明flex-basis起到了作用。
在这里插入图片描述

7 align-items和align-self控制对齐的方式

align-items和align-self都是按照元素的排列方向上的垂直方向上的对齐方式。例如：子元素排列方向是水平，那么他们两个控制的就是垂直方向上的对齐方式，子元素的排列方式是垂直，那么他们控制的就是水平方向上的对齐方式。

flex-start：顶部（或者左边）对齐
flex-end：底部（或者右边）对齐
center：居中对齐
baseline：顶部对齐
stretch：拉伸子元素，让他们占满父容器，默认值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			border: 1px solid black;
			padding: 5px;
			width: 350px;
			height: 160px;
			display: flex;
			/*flex-direction: column;*/
			flex-wrap: wrap;
		}
		.container>div{
			border:1px solid black;
			padding: 5px;
			width:100px;
		}
</style>
</head>
<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<button onclick="change(this.innerHTML);">flex-start</button>
	<button onclick="change(this.innerHTML);">flex-end</button>
	<button onclick="change(this.innerHTML);">center</button>
	<button onclick="change(this.innerHTML);">baseline</button>
	<button onclick="change(this.innerHTML);">stretch</button>
	<script>
		function change(val){
			document.getElementsByClassName("container")[0].style.alignItems = val;
		}
	</script>
</body>
</html>

这样可以看样式：
在这里插入图片描述
同理align-self也可以设置对应的属性，效果是一样的，只不过注意的是，这个属性必须设置在子元素上。

8 使用justify-content控制元素分布

这个属性其实就是处理空白区域，设置在排列方向上的分布方式。设置在父容器的属性。

flex-start：所有子元素靠近排列方向的起始端，留出结束端多余的空间。
flex-end：所有子元素靠近排列方向的结束端，留出开始端多余的空间。
center：所有子元素靠近排列方向的中间，留出结束端、开始端多余的空间。
space-between：多余空间平均分配到各子元素的中间（无两边）。
space-around：多余的空间平均分配到各自元素的中间和两边

<style>
		.container{
			border: 1px solid black;
			padding: 5px;
			width: 350px;
			height: 160px;
			display: flex;
			/*flex-direction: column;*/
			flex-wrap: wrap;
		}
		.container>div{
			border:1px solid black;
			padding: 5px;
			width:100px;
		}
</style>
</head>
<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<button onclick="change(this.innerHTML);">flex-start</button>
	<button onclick="change(this.innerHTML);">flex-end</button>
	<button onclick="change(this.innerHTML);">center</button>
	<button onclick="change(this.innerHTML);">space-between</button>
	<button onclick="change(this.innerHTML);">space-around</button>
	<script>
		function change(val){
			document.getElementsByClassName("container")[0].style.justifyContent = val;
		}
	</script>
</body>
</html>

这里的页面：
在这里插入图片描述
大家可以调试一下看看效果。

8 使用align-content控制元素分布

当有多个子元素超出父容器一行时，进行控制分布方式，其实这个属性就是多行的justify-content。也可以这样理解justify-content控制的时垂直方向，align-content控制的是水平方向，而且二者可以组合用。这里的属性与上面的也一样。就是将水平的方式改成垂直。修改上面代码，其余不变。

<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

function change(val){
	document.getElementsByClassName("container")[0].style.alignContent = val;
}

页面效果。
在这里插入图片描述

借汝之光，得以光明

关注

1
点赞
踩
1

收藏

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

1 使用弹性盒子布局html+css的布局有很多种比如：float和inline-block这种布局，但是这种布局的有很大的缺点。css3新增了弹性布局。这也是当今最主流的布局方式之一。2 使用flex类型的盒模型（display:flex）该模型有如下几种属性：flex-flow：这是一个复合属性，由flex-flow和flex-direction组成。flex-directio...
复制链接

扫一扫

专栏目录