gdk

导航

弹性式布局

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

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

　　

posted on 2022-03-25 20:22  郭东康  阅读(28)  评论(0)    收藏  举报