flex 弹性布局源码

最新推荐文章于 2022-09-06 21:37:10 发布

yb305小白

最新推荐文章于 2022-09-06 21:37:10 发布

阅读量486

点赞数 1

分类专栏： css 文章标签： css flex

本文链接：https://blog.csdn.net/yb305/article/details/103254498

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
div{
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	line-height:30px;
}
/*纵向排列*/
.direcitonDemo{
	  display:flex;
	  flex-direction: column;
}
.part1{
	background:orange;
	height:30px;
	width:40px;
	margin:5px;
}
/*横向排列*/
.rowDemo{
	 display:flex;
	 flex-direction: row;
}
.part2{
	background:orange;
	height:30px;
	width:40px;
	margin:5px;
}
/*不换行*/
.nowrapDemo{
	display:flex;
	flex-wrap:nowrap;
}
/*换行*/
.wrapDemo{
    display:flex;
	flex-wrap:wrap;
}
/*换到第一行*/
.wrap_reverseDemo{
	display:flex;
	flex-wrap:wrap-reverse;
}
.part3{
	background:orange;
	height:30px;
	margin:5px;
	width:500px;
}
.part4{
	background:orange;
	margin:5px;
	width:40px;
	line-height: inherit;/*从父元素继承 line-height 属性*/
}
.part5{
	background:orange;
	margin:5px;
	flex-grow:2;
	line-height: inherit;/*从父元素继承 line-height 属性*/
}
.part6{
	background:orange;
	margin:5px;
	flex-grow:1;
	line-height: inherit;/*从父元素继承 line-height 属性*/
}
/*水平左对齐*/
.flextStartDemo{
	display:flex;
	border:1px solid orange;
}
/*水平右对齐*/
.flexEndDemo{
	display:flex;
	justify-content:flex-end;
	border:1px solid orange;
}
/*中间对齐*/
.centerDemo{
	display:flex;
	justify-content:center;
	border:1px solid orange;
}
/*两端对齐*/
.spacebetweenDemo{
	display:flex;
	justify-content:space-between;
	border:1px solid orange;
}
/*两侧间隔相等*/
.spaceAroundDemo{
	display:flex;
	justify-content:space-around;
	border:1px solid orange;
}
/*交叉轴的起点对齐*/
.alignStartDemo{
	display:flex;
	align-items:flex-start;/*垂直对齐*/
	justify-content:center;/*水平中间对齐*/
	height:90px;
	border:1px solid orange;
}
/*交叉轴的终点对齐*/
.alignEndDemo{
	display:flex;
	align-items:flex-end;
	justify-content:center;/*水平中间对齐*/
	height:90px;
	border:1px solid orange;
}
/*垂直中间对齐*/
.alignCenterDemo{
	display:flex;
	align-items:center;/*垂直对齐*/
	justify-content:center;/*水平中间对齐*/
	height:90px;
	border:1px solid orange;
}
/*第一行文字的基线对齐*/
.alignBaselineDemo{
	display:flex;
	align-items:baseline;/*垂直对齐*/
	justify-content:center;/*水平中间对齐*/
	height:90px;
	border:1px solid orange;
}
.alignStretchDemo{
	display:flex;
	align-items:stretch;/*垂直填充占满*/
	justify-content:center;/*水平中间对齐*/
	height:90px;
	line-height:90px;
	border:1px solid orange;
}
.growDemo{
display:flex;
flex-grow:1;
}
</style>
</head>
<body>
<h4>3.1.纵向排列:flex-direction: column</h4>
<div class="direcitonDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h4>3.2.横向排列 flex-direction: row</h4>
<div class="rowDemo">
	<div class="part2">1</div>
	<div class="part2">2</div>
	<div class="part2">3</div>
</div>
<h4>3.3.换行属性 flex-wrap</h4>
<h5>3.3.1.不换行 flex-wrap:nowrap</h5>
<div class="nowrapDemo">
	<div class="part3">1</div>
	<div class="part3">2</div>
	<div class="part3">3</div>
	<div class="part3">4</div>
</div>
<h5>3.3.2.换行 flex-wrap:wrap</h5>
<div class="wrapDemo">
	<div class="part3">1</div>
	<div class="part3">2</div>
	<div class="part3">3</div>
	<div class="part3">4</div>
</div>
<h5>3.3.3.换到第一行 flex-wrap:wrap_reverse</h5>
<div class="wrap_reverseDemo">
	<div class="part3">1</div>
	<div class="part3">2</div>
	<div class="part3">3</div>
	<div class="part3">4</div>
</div>
<h4>3.4.水平位置布局justify-content</h4>
<h5>3.4.1.左对齐(默认) justify-content:flex-start</h5>
<div class="flextStartDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.4.2.右对齐 justify-content:flex-end</h5>
<div class="flexEndDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.4.3.中间对齐 justify-content:center</h5>
<div class="centerDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.4.4.两端对齐 justify-content:space-between</h5>
<div class="spacebetweenDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.4.5.两侧间隔相等 justify-content:space-around</h5>
<div class="spaceAroundDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h4>3.5.垂直布局 align-items</h4>
<h5>3.5.1.交叉轴的起点对齐 align-items:flex-start</h5>
<div class="alignStartDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.5.2.交叉轴的终点对齐 align-items:flex-end</h5>
<div class="alignEndDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.5.3.交叉轴的中点对齐 align-items:center</h5>
<div class="alignCenterDemo">
	<div class="part1">1</div>
	<div class="part1">2</div>
	<div class="part1">3</div>
</div>
<h5>3.5.4.第一行文字的基线对齐 align-items:baseline</h5>
<div class="alignBaselineDemo">
	<div class="part1" style="height:50px;">1</div>
	<div class="part1" style="height:30px;">2</div>
	<div class="part1" style="height:70px;">3</div>
</div>
<h5>3.5.5.未设置高度,高度将沾满整个容器的高度 align-items:stretch</h5>
<div class="alignStretchDemo">
	<div class="part4">1</div>
	<div class="part4">2</div>
	<div class="part4">3</div>
</div>
<h5>4.1.元素放大比例,默认0 flex-grow:1</h5>
<div class="growDemo">
	<div class="part5">1</div>
	<div class="part6">2</div>
	<div class="part6">3</div>
</div>
</body>
</html>

yb305小白

关注

1
点赞
踩
1

收藏

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

<html><head><style>div{ text-align:center; color:#fff; font-weight:bold; font-size:16px; line-height:30px;}/*纵向排列*/.direcitonDemo{ display:flex; flex-direction: col...
复制链接

扫一扫