web前端开发技术——弹性布局

弹性布局

1、了解两个基本概念：

容器：需要添加弹性布局的父元素；

项目：弹性布局容器中的每一个子元素，称为项目；

2、弹性布局的使用？

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display: flex;容器添加弹性布局后，显示为块级元素；

display: inline-flex;容器添加弹性布局后，显示为行级元素；

④设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。但是position定位属性依然生效。

image

3、作用于容器的相关属性：

① flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端；

row-reverse：主轴为水平方向，起点在左端；

column：主轴为垂直方向，起点在上端。

column-reverse：主轴为垂直方向，起点在下端。

主轴方向为：

　row-起点在左边

　　row-reverse-起点在右边

　　column- 起点在上端

　　column-reverse-起点在下端。

image

flex-start（默认值）：项目位于主轴起点

flex-end：项目位于主轴终点

center： 居中

space-between：两端对齐，项目之间的间隔都相等。（开头和最后的项目，与父容器的边缘没有间隔）

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器的边缘有一定的间隔，是项目间隔的一半。）

fiex弹性布局justify-content

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fiex弹性布局justify-content</title>
		<style type="text/css">
			.box1{
				width: 400px;
				height: 100px;
				border: 2px solid #f4a5a5;/*边框的宽度颜色*/
				background-color: #ffc9c9;
				border-radius: 20px;/*圆的半径*/
				display: flex;
				/*justify-content: flex-start;左对齐可以省略*/
				align-items: center;/*居中*/
				}
				div[class^=box]{
                /*div中的class开头是box的代码都含有*/
				width: 400px;
				height: 100px;
				border: 2px solid #f4a5a5;
				background-color: #ffc9c9;
				border-radius: 20px;
			}
			.s1{
				width: 100px;
				height: 20px;
				border: 2px solid #b2f2bb;
				background-color: #9ac190;
				border-radius: 10px;
			}
			.s2{
				width: 50px;
				height: 20px;
				border: 2px solid #b2f2bb;
				background-color: #9ac190;
				border-radius: 10px;
			}
			.s3{
				width: 100px;
				height: 20px;
				border: 2px solid #b2f2bb;
				background-color: #9ac190;
				border-radius: 10px;
			}
			.box2{
				display: flex;
				justify-content: flex-end;
				align-items: center;/*居中*/
				}
			.box3{
				
				display: flex;
				justify-content: center;
				align-items: center;/*居中*/
				}
			.box4{
				display: flex;
				justify-content:space-between;
				align-items:center;
			}
			.box5{
				display: flex;
				justify-content:space-around;
				align-items:center;
			}
		</style>
	</head>
	<body>
		<h1>fiex-</h1>
		<div class="box1">
			<div class="s1"></div>
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
		<h1>fiex-end</h1>
		<div class="box2">
			<div class="s1"></div>
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
		<h1>center</h1>
		<div class="box3">
			<div class="s1"></div>
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
		<h1>space-between</h1>
		<div class="box4">
			<div class="s1"></div>
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
		<h1>space-around</h1>
		<div class="box5">
			<div class="s1"></div>
			<div class="s2"></div>
			<div class="s3"></div>
		</div>
	</body>
</html>

image

posted @ 2026-06-29 14:49  柒月份  阅读(7)  评论(0)    收藏  举报