html CSS - Flexbox

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CSS - Flexbox相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
	.flex-container{
		display:flex;
		width:400px;
		height:250px;
		background-color:#000;
		justify-content:center;
	}
	.flex-item{
		background-color:lightblue;
		width:100px;
		height:100px;
		margin:10px;
	}
	.first{
		order:-1;
	}
</style>
</head>

<body>
	<div class="flex-container">
		<div class="flex-item">Flex item 1</div>
		<div class="flex-item first">Flex item 2</div>
		<div class="flex-item">Flex item 3</div>
	</div>
</body>
</html>

以上是关于html CSS - Flexbox的主要内容，如果未能解决你的问题，请参考以下文章