Flex布局（基础）

最新推荐文章于 2024-04-27 10:22:58 发布

2301_77744590

最新推荐文章于 2024-04-27 10:22:58 发布

阅读量87

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/2301_77744590/article/details/133911016

版权

1.弹性盒子布局可以帮助解决多个盒子水平排列的问题

如下：style样式只有宽度，高度，背景颜色。

代码：

<style>
			.biggest{
				width: 70%;
				height: 350px;
				background-color: aquamarine;
				margin: 0 auto;
				/* display: flex; */
			}
			.d1,.d2,.d3{
				width: 200px;
				height: 200px;
			}
			.d1{
				background-color: antiquewhite;
			}
			.d2{
				background-color: pink;
			}
			.d3{
				background-color: brown;
			}
</style>

如下：大盒子中包含三个不同颜色小盒子。

<body>
		<div class="biggest">
			<div class="d1"></div>
			<div class="d2"></div>
			<div class="d3"></div>
		</div>
	</body>

效果展示：在不使用Flex布局的情况下，三个盒子为块元素所以会依次纵向排列

只需要在最外层大盒子属性中添加display：felx 轻松使三个小盒子横向排列

代码：

.biggest{
				width: 70%;
				height: 350px;
				background-color: aquamarine;
				margin: 0 auto;
				/* 弹性盒子布局 */
				display: flex;
			}

效果展示：

2.display：flex可以配合上其他的属性一同使用，帮助我们在水平，垂直方向上实现不同需求的弹性布局

一. justify-content 的使用方法和效果

代码举例：

.biggest{
				width: 70%;
				height: 350px;
				background-color: aquamarine;
				margin: 0 auto;
				/* 弹性盒子布局 */
				display: flex;
				justify-content: center;/* 使用时将center替换 */
			}

使用举例：justify-content：center

center	居中对齐
space-between	两端对齐（与外部大盒子相邻）
space-around	分散对其（每个小盒子左右都留等量距离)
space-evenly	平均对其（每个盒子等距分布）
flex-start	左对齐
flex-end	右对齐

效果：

二.align-items的不同方法使用方法和效果

代码举例：

.biggest{
				width: 70%;
				height: 350px;
				background-color: aquamarine;
				margin: 0 auto;
				/* 弹性盒子布局 */
				display: flex;
				justify-content: flex-start;/* 使用时将center替换 */
				align-items: center;
			}

使用举例：align-items: center

（在需要使用不同align-items: 的时将center替换）

flex-start	在父级盒子最上端对其
flex-end	垂直居中对其
center	在父级盒子最下端对其
baseline	项目的第一行文字的基线对齐（不常用）
stretch	自动填充高度将容器占满（子盒子没有设置高度时有效）

三.flex-wrap属性的使用方法和效果

使用举例： flex-wrap: wrap

（使用时将warp替换）

nowrap	不自动换行
wrap	自动换行
wrap-reverses	反向换行

HTML代码：

<div class="biggest">
			<div class="d1">1</div>
			<div class="d2">2</div>
			<div class="d3">3</div>
			<div class="d4">4</div>
			<div class="d5">5</div>
			<div class="d6">6</div>
</div>

style代码：

.biggest{
				width: 400px;
				height: 350px;
				background-color: aquamarine;
				margin: 0 auto;
				/* 弹性盒子布局 */
				display: flex;
				flex-wrap: nowrap;

			}

注意：仔细观察flex-wrap:wrap-reverse和flex-wrap：wrap虽然都有自动换行，但是其中盒子内的数字顺序是相反的

四.flex-direction属性的使用方法

代码举例：

.biggest{
				width: 450px;
				height: 600px;
				background-color: aquamarine;
				margin: 0 auto;
				/* 弹性盒子布局 */
				display: flex;
				flex-direction:row;

			}

row	（默认值）表示沿水平方向，由左到右
row-reverse	沿水平方向，由右到左
column	垂直方向，由上到下
column-reverse	垂直方向，由下到上

效果展示：

五.order属性的使用方法和效果

order属性添加在子盒子中，数值越小位置越靠前

代码举例：

.d2{
                background-color: pink;
                 order:-1;
            }

效果展示

六.flex-grow属性的使用方法和效果

1.flex-grow属性决定是否平铺剩余空间

代码举例：

（因为只给第三个小盒子增加了flex-grow的属性所以剩余空间只有第三个盒子平铺）

.d3{
				background-color: brown;
				flex-grow: 1;
			}

效果展示：

2.当我们给其他子盒子增加 flex-grow属性后剩余面积，就由这些添加过flex-grow属性的盒子平分

代码举例：

			.d2{
				background-color: pink;
				 flex-grow: 1;
			}
			.d3{
				background-color: brown;
				flex-grow: 1;
			}

由上述代码可见我们给第二个和第三个子盒子添加了flex-grow属性，所以剩余的宽度由这两个元素平摊

效果展示：

由此可知，当添加此 flex-grow属性后将会按比例平摊父级元素盒子的剩余宽度

3.可以将每个字盒子都设置flex-grow属性，这样就是按比例占满整个父级元素的宽度

代码举例：

			.d1{
				background-color: antiquewhite;
				flex-grow: 1;
			}
			.d2{
				background-color: pink;
				 flex-grow: 2;
			}
			.d3{
				background-color: brown;
				flex-grow: 4;
			}

效果展示：

可以看出来宽度子盒子1<子盒子2<子盒子3

2301_77744590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局（基础）

如下：style样式只有宽度，高度，背景颜色。如下：大盒子中包含三个不同颜色小盒子。效果展示：在不使用Flex布局的情况下，三个盒子为块元素所以会依次纵向排列只需要在最外层大盒子属性中添加display：felx 轻松使三个小盒子横向排列。
复制链接

扫一扫