移动端布局三： flex布局

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>