HTML flex

最新推荐文章于 2024-02-01 18:13:38 发布

李子不会理

最新推荐文章于 2024-02-01 18:13:38 发布

阅读量230

点赞数

分类专栏：前端HTML 文章标签： html servlet java

本文链接：https://blog.csdn.net/ljj07220602/article/details/126587338

版权

前端HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

弹性盒：display：flex 将一个div定义，适合用于移动端布局。会默认将子元素浮动。若设置对象为span则会自动转换为div order：x （顺序越大越往后） flex：x （剩余高度由其补满 x为其占据倍数）

justify-content: space-around/evenly; 左右/等比例划分* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */ align-items:XX ;上下 flex-shrink: 0; /* 弹性盒不允许挤压 */ flex-wrap: wrap; 换行

多用于移动端设置，设置移动端时尽量用比例

::-webkit-scrollbar{

display: none;

} 使得滚动条消失

弹性盒属性案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box{
			width: 500px;
			height: 500px;
			border: 2px solid black;
			margin: 100px auto;
			/* 设置为弹性盒 */
			display: flex;	
			flex-wrap: wrap;/* 折行 */
			flex-direction: column-reverse;/* 轴块变换 */
			justify-content: flex-end; /* 主轴对齐方式 */
			align-items: center;/* 侧轴 */
		    align-content:flex-start;/* 折后距离 */
		}
		.box div{
			width: 100px;
			height: 100px;
			/* margin: auto; */
			border: 1px dashed red;
		}
		
		.sy1{
			width: 500px;
			height: 500px;
			border: 2px solid black;
			display: flex;
			/* flex-direction: column; */
		}
		.sy1 div{
			width: 100px;
			/* height: 100px; */
			border: 1px dashed red;
			box-sizing: border-box;
			/* background-color: #7FFFD4; */
		}
		.d1{
			height: 100px;
			align-self: flex-start;
			padding: 10px;
		}
		.d2{
			height: 100px;
			align-self: flex-end;
		}
		.d3{
			height: 100px;
			align-self: center;
		}
		.d4{
			height: 100px;
			align-self: baseline;
		}
		.d5{
			height: 100px;
			/* 默认 */
			align-self: stretch;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- <span>1111</span> -->
		<div>111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
		<div>555</div>
		<div>666</div>
		<div>777</div>
		</div>
		
	<div class="sy1">
		<div class="d1">11</div>
		<div class="d2">22</div>
		<div class="d3">33</div>
		<div class="d4">44</div>
		<div class="d5">55</div>
	</div>
	</body>
</html>

结果：

李子不会理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML flex

左右/等比例划分* 在弹性盒对象的元素中的各项周围留有空白 */ align-items:XX;/* 弹性盒不允许挤压 */ flex-wrap: wrap;display：flex 将一个div定义，适合用于移动端布局。会默认将子元素浮动。若设置对象为span则会自动转换为div order：x （顺序越大越往后） flex：x （剩余高度由其补满 x为其占据倍数）} 使得滚动条消失。...
复制链接

扫一扫