弹性布局

最新推荐文章于 2023-12-05 14:10:18 发布

高鹏飞白羊

最新推荐文章于 2023-12-05 14:10:18 发布

阅读量147

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102454332

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

弹性布局主要解决：一个元素中的子元素的布局方式，为布局提供最大的灵活性

在这里插入图片描述

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
		}
		.c2{
			background:#ff0;
		}
		.c3{
			background:#f0f;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

弹性布局的相关概念

1，弹性布局的容器
要把子元素布局成弹性布局的父元素称为容器
2，弹性布局的项目
要布局的子元素称为项目
3，主轴
项目们排列的方向，称为主轴
项目们是横向排列，主轴就是X轴
项目们是纵向排列，主轴就是Y轴
4，交叉轴
与主轴垂直相交额方向，称为交叉轴

语法

将元素变为弹性容器之后，name他的所有子元素将变为弹性项目
所有项目都允许按照弹性布局的方式排列
display:
取值：flex，将块级元素变为容器
inline-flex，将行内元素变为元素

1，设置元素的flex之后，项目的
float，vertical-align，clear属性失效
2，子元素允许修改尺寸
3，容器的对齐方式text-align失效

容器的属性

1，flex-dirction
设置主轴的方向
取值：1，row 默认值主轴是X轴，起点是左端，终点是右端
2，row-reverse 主轴是X轴，起点是右端
3，column 主轴是Y轴，起点是上端
4，column-reverse 主轴是Y轴，起点是下端
2，flex-wrap 不压缩，换行
当一个主轴排列不下所有的项目的时候，可以设置换行显示
取值：nowrap 默认值，空间不够时也不换行，项目会缩小
wrap 换行
wrap-reverse 换行并反转
3，flex-flow
是flex-dirction和flex-wrap的缩写
取值：row nowrap 默认值
4，justify-content
项目在主轴上的对齐方式
取值： flex-start;默认值，主轴起点对齐
flex-end 主轴终点对齐
center 主轴中心对齐
space-between 主轴两端对齐
space-around 主轴两端对齐，每个间距相同
5，align-items
项目在交叉轴上对齐方式
取值： flex-start 默认值在交叉轴起点对齐
flex-end 在交叉轴终点对齐
center 在交叉轴居中对齐
baseline 在交叉轴基线对齐
stretch 如果项目没有设置尺寸，在交叉轴上沾满所有空间

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;
			justify-content:space-around;
			
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
		}
		.c2{
			background:#ff0;
		}
		.c3{
			background:#f0f;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

项目属性

这组属性只能设置在一个项目上，不影响其他项目
1，order
项目排列的顺序，值越小，越靠近主轴起点，默认值为0
取值：无单位整数

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
			height:300px;
			align-items:flex-start;
			
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
			order:3;
		}
		.c2{
			background:#ff0;
			order:2;
		}
		.c3{
			background:#f0f;
			order:1;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

2，flex-grow
增长速度（比例）
定义项目的放大比例，如果容器有足够空间，项目按照比例方法
取值：无单位整数
取值越大，占据的剩余空间越多

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
			height:300px;
			align-items:flex-start;
			
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
			flex-grow:1;
		}
		.c2{
			background:#ff0;
			flex-grow:4;
		}
		.c3{
			background:#f0f;
			flex-grow:10;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

3，flex-shrink
缩小速度（比例）
定义项目的缩小比例，当容器不足空间，项目如何缩小
取值：无单位整数默认值为1
取值越大，缩小越快

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
			height:300px;
			align-items:flex-start;
			
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
			flex-shrink:1;
		}
		.c2{
			background:#ff0;
			flex-shrink:4;
		}
		.c3{
			background:#f0f;
			flex-shrink:10;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

4，align-self
定义当前项目在交叉轴上的对齐方式
取值： flex-start 默认值在交叉轴起点对齐
flex-end 在交叉轴终点对齐
center 在交叉轴居中对齐
baseline 在交叉轴基线对齐
stretch 如果项目没有设置尺寸，在交叉轴上沾满所有空间
auto 继承父元素的align-items效果

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<!--引入外部样式-->
	<style>		
		#parent{
			border:2px solid red;
			display:flex;
			height:300px;
			align-items:flex-start;
			
		}
		.c1,.c2,.c3{
			width:200px;
			height:200px;
		}
		.c1{
			background:#00f;
			flex-shrink:1;
			align-self:flex-end;
		}
		.c2{
			background:#ff0;
			flex-shrink:4;
			align-self:center;
		}
		.c3{
			background:#f0f;
			flex-shrink:10;
			align-self:flex-start;
		}
	</style>
	</head>
	<body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
		</div>
	</body>
</html>

高鹏飞白羊

关注

0
点赞
踩
0

收藏

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

弹性布局主要解决：一个元素中的子元素的布局方式，为布局提供最大的灵活性<!doctype html><html> <head> <title></title> <meta charset="utf-8">  <style> #parent{ bor...
复制链接

扫一扫