弹性式布局

2022-03-25 20:32:26 作者：互联网

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

<!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