flex佈局原理

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1.佈局原理

flex是flexible Box的縮寫,意為"彈性佈局" ,用來為盒狀模型提供最大的靈活性,任何-個容器都可以指定為flex佈局。

• 當我們為父盒子設為 flex佈局以後,子元素的float. clear 和vertical-align屬性將失效。
• 伸縮佈局 =彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

2.常見父項屬性

以下由6個屬性是對父元素設定的

1. flex-direction: 設定主軸的方向
2. justify-content :設定主軸上的子元素排列方式
3. flex-wrap :設定子元素是否換行
4. align-content :設定側軸上的子元素的排列方式(多行)
5. align-items :設定側軸上的子元素排列方式(單行)
6. flex-flow :複合屬性.相當於同時設定了flex direction和flex wrap

<style>
.box{
	width: 500px;
	height: 300px;
	background-color: skyblue;

	display: flex; /*用flex佈局子元素*/

	/*----------設定主軸及排列方向flex-direction------------------------*/
	flex-direction: row; 			/*行為主軸，左到右*/
	/*row-reverse;  行主軸，右到左
	 column;			列主軸，上到下
	column-reverse;  列主軸，下到上*/

	/*-----------設定主軸排列（對齊）方式justify-content---------------*/
	justify-content:flex-start; /*預設值從頭部開始如果主軸是x軸，則從左到右*/
	
	/*flex-end; 	從尾部開始排列	
	center;      在主軸居中對齊(如果主軸是x軸則水平居中)
	space-around; 平分剩餘空間
	space-between; 先兩邊貼邊再平分剩餘空間(重要)*/

	/*------------設定主軸子元素超出父元素寬度是否換行---------------------*/
	/*flex佈局中，
	預設的子元素是不換行的，
	如果裝不開， 會縮小子元素的寬度，
	放到父元素裡面*/
	flex-wrap: nowrap; /*預設設定：不換行，如果超出就把子元素縮小，一起往後排*/
	flex-wrap:wrap; /*換行*/



	/*--------------設定側軸排列方式(多行)align-content------------------------------*/
	/* align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
	flex-start 從上到下
	flex-end 從下到上
	center   擠在一起居中(重直居中)
	stretch  拉伸(預設值) 盒子不要給高度*/
	
	align-content:center;


	/*----------------設定側軸排列對齊方式（單行）-----------------------*/
	/*align-items: center;*/
}
.box span{
	width: 100px;
	height: 100px;
	margin-right: 10px;
	background-color: yellow;
}
</style>
<div class="box">
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
</div>