Flex布局練習-骰子布局

• 骰子布局
• • • • • (1)單項目
        • (2)雙項目
        • (3)三項目
        • (4)四項目
        • (5)六項目
        • (6)九項目

學習來源：阮一峰的flex布局實戰

骰子布局

<style type="text/css">
        /*div1是父級元素*/
		.div1{
			height: 90px;
			width: 90px;
			background-color: grey;
			display: flex; 
			display: -moz-flex; 
			display: -webkit-flex;
			overflow: hidden;
		}
		/*div2是子元素*/
		.div2{
			height: 30px;
			width: 30px;
			background-color: black;
		}
	</style>
           

(1)單項目

<div class="div1" style="align-items: flex-end;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: flex-end; align-items: flex-end;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: flex-end; align-items: center;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: center; align-items: flex-end;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: center; align-items: center;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: center;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: flex-end;">
	<div class="div2"></div>
</div>
           

<div class="div1" style="align-items: center;">
	<div class="div2"></div>
</div>
           

<div class="div1">
	<div class="div2"></div>
</div>
           

(2)雙項目

<div class="div1" style="justify-content: space-between;">
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

<div class="div1" style="flex-direction: column; justify-content: space-between;">
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

<div class="div1" style="flex-direction: column; justify-content: space-between; align-items: center;">
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

<div class="div1">
	<div class="div2"></div>
	<div class="div2" style="align-self: center;"></div>
</div>
           

<div class="div1" style="flex-direction: column; justify-content: space-between; align-items: flex-end;">
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

<div class="div1" style="justify-content: space-between;">
	<div class="div2"></div>
	<div class="div2" style="align-self: flex-end;"></div>
</div>
           

(3)三項目

<div class="div1">
	<div class="div2"></div>
	<div class="div2" style="align-self: center;"></div>
	<div class="div2" style="align-self: flex-end;"></div>
</div>
           

(4)四項目

<div class="div1" style="justify-content: space-between;">
	<div style="width: 30px; height: 90px; display: flex; flex-wrap: wrap; align-content: space-between;">
		<div class="div2"></div>
		<div class="div2"></div>
	</div>
	<div style="width: 30px; height: 90px; display: flex; flex-wrap: wrap; align-content: space-between;">
		<div class="div2"></div>
		<div class="div2"></div>
	</div>
</div>
           

判斷換行和使用嵌套：
特别說一下上面的四項目，這個就是用到了嵌套。
首先四個項目通過同方向且互相不重合的平移無法在一條直線上，
這就表明了肯定不是通過不換行(flex-wrap)+項目自身側軸對齊(align-self)這兩個屬性實作的。
那就嘗試一下用align-content+flex-wrap，通過換行來實作。align-content可以實作上下對齊的情況，
但是考慮橫向對齊時，不論怎樣設定justify-content發現也無法實作上述效果。
這裡介紹了嵌套的思想，把第一行和第三行再看作是一個flex容器，這樣就可以實作了。
           

<div class="div1" style="flex-wrap: wrap; align-content: space-between;">
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

(5)六項目

<div class="div1" style="flex-wrap: wrap;">
	<div style="display: flex; width: 90px; height: 30px;">
		<div class="div2"></div>
		<div class="div2"></div>
		<div class="div2"></div>
	</div>
	<div style="display: flex; justify-content: center; width: 90px; height: 30px;">
		<div class="div2"></div>
	</div>
	<div style="display: flex; justify-content: space-between; width: 90px; height: 30px;">
		<div class="div2"></div>
		<div class="div2"></div>
	</div>
</div>
           

很顯然上面也是運用了嵌套的方法
           

<div class="div1" style="flex-wrap: wrap; align-content: space-between; flex-direction: column;">
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

<div class="div1" style="flex-wrap: wrap; align-content: space-between;">
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
</div>
           

(6)九項目

<div class="div1" style="flex-wrap: wrap;">
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div class="div2"></div>
</div>