Flex布局示例--骰子

2015/12/14 43966
<!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>
代码片段
