Flex布局示例--骰子

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

<!DOCTYPE html>
<html>
<head>
	<title>Flex Layout</title>
	<Meta charset="utf-8"/>
	<style type="text/css">
		.cBox{display: flex; flex-direction:column;}
		.one{background-color: #9900FF;}
		.two{background-color: #996633;}
		.three{background-color: #BF4040;}
		.four{background-color: #133312;}
		.five{background-color: #6B2443;}
		.six{background-color: #3C8A2E;}
		.item{background-color: #87FFAD; width: 20px; height: 20px; border-radius: 10px; margin: 3px;}
		.container{width: 80px; height: 80px; margin: 5px; border-radius: 3px; padding: 2px;}

		.Box{
			display: flex;
			justify-content: center;
			align-items:center;
		}

		.Box2{
			display: flex;
			justify-content:space-between;
		}
		.Box2 .item:nth-child(2){
			align-self:flex-end;
		}

		.Box3{
			display: flex;
			justify-content:space-between;
		}
		.Box3 .item:nth-child(2){
			align-self:center;
		}
		.Box3 .item:nth-child(3){
			align-self:flex-end;
		}

		.Box4{
			display: flex;
			flex-wrap:wrap;
			justify-content:flex-end;
			align-content:space-between;
		}
		.Box4 .column{
			flex-basis:100%;
			display: flex;
			justify-content:space-between;
		}

		.Box5{
			display: flex;
			justify-content:space-between;
		}
		.Box5 .column{
			display: flex;
			flex-direction:column;
			justify-content:space-between;
		}
		.Box5 .column:nth-child(2){
			justify-content:center;
		}

		.Box6{
			display: flex;
			flex-warp:wrap;
			align-content:space-between;
		}
		.Box6 .column{
			display: flex;
			flex-direction:column;
			justify-content:space-between;
		}

	</style>
</head>
<body>
	<div class="cBox">
		<div class="container one Box">
			<span class="item"></span>
		</div>
		<div class="container two Box2">
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="container three Box3">
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="container four Box4">
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
		</div>
		<div class="container five Box5">
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
			<div class="column">
				<span class=" item"></span>
			</div>
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
		</div>
		<div class="container six Box6">
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
			<div class="column">
				<span class=" item"></span>
				<span class=" item"></span>
			</div>
		</div>
	</div>
</body>
</html>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

原文链接：https://www.f2er.com/css/456802.html

Flex布局示例--骰子

猜你在找的CSS相关文章