[知识总结]HTML5布局之flex布局总结

#一 布局几种方式

1.静态(自然)布局(没有任何(float,position等)修饰的布局)
2.浮动布局(float)
3.定位布局(position)
4.弹性布局(flex)
5.栅格布局(就是把网页的宽度分成固定的相同宽度,然后列出各种可能的组合,以便页面在进行呈现时能够进行快速的布局,通常12等分或24等分)

#弹性布局

概念:是CSS3的弹性盒子(Flexible Box)或FlexBox,是一种布局方式,当页面需要适应不同屏幕大小或设备类型时,他会确保拥有恰当的布局方式.

#原理
弹性布局是通过调整其内元素的宽高,从而在任何显示设备对可用的显示空间的最佳填充能力.

#名称解释
##轴(Axis)

每个弹性框布局都包含两个轴,弹性项目(子级元素)延其依次排列的的水平轴称之为主轴(水平线),
垂直于主轴的称之为侧重(垂直线)

#尺寸(Dimension)
根据弹性容器的主轴侧轴,弹性项目的宽高,对应的主轴的称之为主轴尺寸(宽),对应侧轴的称之为侧轴尺寸(高)

#定义一个弹性布局

display:flex;
值flex使弹性容器成为一个块级元素,定义在父级上
display:inline-flex;
值inline-flex使弹性容器成为行内元素.定义在父级上.
display:none;

注意:使用弹性布局后,子元素的float,clear和vertical-align将失效.

#flex属性分类
##1.容器属性(作用于父级上)
###a.flex-direction

这个属性决定了主轴(水平)的方向(项目的排列方向)
###b.flex-wrap
默认情况下,项目排在一行,可以通过这个属性设置来决定子级元素是否换行显示
###c.flex-flow
该属性是flex-direction和flex-wrap属性的简写
###d.justity-content
定义了项目(子级)在主轴(水平)方向上的对齐方式
###e.align-items
定义了项目(子级元素)在交叉轴上的对齐方式
###f.align-content
定义了多根轴的对齐方式,如果只有一根轴线该属性不起作用

##2.项目(子级)属性(属性写在子级元素上)
###a.order

定义了项目(子级)的排列顺序,数值越小排列越前,值可正可负
###b.flex-grow
定义了项目(子级元素)的放大比例,默认是0,如果空间不够,该项目不放大
###c.flex-shrink
定义了项目的缩小比例,默认1,如果空间不够,该项目自动缩小.
###d.flex-basis
该属性会计算主轴是否有多余空间

###e.flex

是flex-grow,flex-shrink和flex-basis的简写,也就是他们的复合写法
###f.align-self
该属性允许单个项目有与其他项目不一样的对齐方式,默认值auto,表示父级元素的align-items属性,没如果没有父级,则等同于stretch

#具体演示
一 容器属性flex-direction属性演示
###HTML代码

<pre>
		flex-direction属性
		flex-direction属性决定主轴的方向（即项目的排列方向）。
		.box {
		  flex-direction: row | row-reverse | column | column-reverse;
		}
		row（默认值）：主轴为水平方向，起点在左端。
		row-reverse：主轴为水平方向，起点在右端。
		column：主轴为垂直方向，起点在上沿。
		column-reverse：主轴为垂直方向，起点在下沿。	
		</pre>
	<h1>flex-direction: row</h1>
	<ul id="box1" class="box1">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>
	<h1>flex-direction: row-reverse</h1>
	<ul id="box2" class="box1">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>	

	<h1>flex-direction: column</h1>
	<ul id="box3" class="box1">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>
	
	<h1>flex-direction: column-reverse</h1>
	<ul id="box4" class="box1">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>	

##CSS样式

	.box1{
				display: flex;
			}
			.box1 li{
				width: 100px;
				height: 100px;
				border: 2px solid red;
				text-align: center;
				list-style: none;
				
			}
		#box1{
			flex-direction: row;
		}
		
		#box2{
		flex-direction: row-reverse;	
		}
		#box3{
		flex-direction: column;	
		}			
		#box4{
		flex-direction: column-reverse;	
		}

#未完待续…