弹性式布局

2022-03-25 20:32:26 阅读：187 来源： 互联网

标签：flex center space stretch 布局弹性 start 默认值

弹性式布局就是更方便的控制内容的对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item {
				background-color: aqua;
				border: #ccc solid 1px;
				padding: 1rem;
				text-align: center;
				margin: 0.75rem;
				width: 100px;
			}

			#container {
				display: flex;
				flex-wrap: wrap;
				background-color: #555;
				/* 对齐方式 */
				justify-content: flex-start;
				/* flex-start(默认值) */
				/* flex-end */
				/* center */
				/* space-between */
				/* space-around */
				/* space-evenly */
				height: 600px;
				/* 项目在交叉轴的对齐方式 */
				align-items: baseline;
				/* stretch(默认值) */
				/* flex-start
					flex-end
					center
					baseline
				 */
				align-content: stretch;
				/* 
				 flex-start
				 flex-end
				 center
				 space-between
				 space-around
				 stretch(默认值)
				 */
			}
			.item-2{
				align-self: center;
				/* 
				 auto(默认值)
				 flex-start
				 flex-end
				 center
				 baseline
				 stretch
				 */
				order: 2;
			}
			.item-1{
				order: 3;
			}
			.item-3{
				order: 1;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="item item-1">
				<h3>Item 1</h3>
			</div>
			<div class="item item-2">
				<h3>Item 2</h3>
			</div>
			<div class="item item-3">
				<h3>Item 3</h3>
			</div>
		</div>
	</body>
</html>

标签：flex,center,space,stretch,布局,弹性,start,默认值
来源： https://www.cnblogs.com/jwzj/p/16056552.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

弹性式布局