flex 伸缩布局：

最新推荐文章于 2024-05-04 17:16:30 发布

xqiitan

最新推荐文章于 2024-05-04 17:16:30 发布

阅读量334

点赞数

分类专栏： h5 CSS

本文链接：https://blog.csdn.net/xqiitan/article/details/88530443

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

27 篇文章 0 订阅

订阅专栏

伸缩布局
传统的布局方案，基于盒状模型，依赖display+position+float属性。它对于那些特殊布局非常不方便，
重要属性：
display:flex 如果一个容器设置了这个属性，那么这个盒子里面的所有直接元素都会自动变成伸缩项flex
justify-content:
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
语法：justify-content:flex-start|flex-end|center|space-between|space-around

设置子元素的排列方式：调整内容
flex-start：从左到右排列
flex-end：从父容器右边到左边
center:让子元素从父元素的中间位置开始排列
space-between:左右与父容器的左右对齐，中间产生同等的间距
space-around:将多余的空间，平均的分在每个子元素的两边，类似magin + auto

伸缩盒子的属性flex-flow:
flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值是0 1 auto。
语法：flex:[flex-grow][flex-shrink][flex-basis]大多数情况下没必要用这种方法，都使用flex缩写。
flex:[number]这个语法制定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。
flex:auto 属性值设为suto的伸缩项目，会根据主轴自动伸缩以自用所有剩余空间。

=============================

等比扩张grow，收缩比例shrink。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扩张比例grow和 收缩比例shrink</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				width: 500px;
				height: 600px;
				border: 1px solid red;
				margin: 0 auto;
				/* 设置父容器为盒子，会使每一个子元素自动变成收缩项
				 当子元素的宽度和大于父容器宽度的适合，子元素会自动平均收缩。*/
				display: flex;
				/* 设置子元素的主轴方向上的排列方式 */
				justify-content: space-around;
				
			}

			.first {
				width: 200px;
				height: 200px;
				background-color: red;
				/* flex-grow:扩展子元素的宽度, 类似安卓LinearLayout的layout_weight属性 
				设置当前元素应该占据剩余空间的比例值，默认值0 */
				/* flex-grow: 1; */
				/* flex-shrink:定义收缩比例（不够空间的分配比例），通过设置的值来计算收缩空间，默认值1。 
				空间不够，不够的那一部分。由每个子元素来平摊。
				eg：
				当值为1:0:0,就是第一个元素占据所有的收缩空间，最后div显示宽度分别为100-200-200。
				当值为0:0:0,就都不做不够空间的分配，最后可能会溢出。
				当值是2:1:1,div显示宽度是150-175-175
				比例值计算：当前空间flex-shrink/所有兄弟元素的flex-shrink的和*/
				flex-shrink: 2;
			}
			.second {
				width: 200px;
				height: 200px;
				background-color: #006400;
				/* flex-grow: 0; */
				flex-shrink: 1;
			}
			.third {
				width: 200px;
				height: 200px;
				background-color: yellow;
				flex-shrink: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="first"></div>
			<div class="second"></div>
			<div class="third"></div>
		</div>
	</body>
</html>

=======================

flex：1比4划分区域，类似使用百分比，划分div占用的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex：1比4划分区域</title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				width: 100%;
				height: 500px;
				background-color: #CCCCCC;
				margin: 0 auto;
				/* 设置父容器为伸缩盒子 */
				display: flex;
				/* 设置子元素在主轴方向上排列方式 */
				/* justify-content: flex-start; */
			}
			.left{
				flex: 1;
				background-color: yellowgreen;
			}.right{
				flex: 4;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

xqiitan

关注

0
点赞
踩
0

收藏

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

伸缩布局传统的布局方案，基于盒状模型，依赖display+position+float属性。它对于那些特殊布局非常不方便，重要属性：display:flex 如果一个容器设置了这个属性，那么这个盒子里面的所有直接元素都会自动变成伸缩项flexjustify-content:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。语法：justify-content:flex-start|...
复制链接

扫一扫