【CSS】【flex布局】css中的flex布局详解

?博客参考自：https://css-tricks.com/snippets/css/a-guide-to-flexbox 这是个很优质的博客，网站也是个很优质的网站，英文好的同学，有精力可以自己去看下

?FlexLayout定义了【main axis】和【cross axis】两根轴，子元素排列的方向称为【main axis】，与主轴垂直的方向称为【cross axis】，FlexLayout可以灵活设置子元素在这两个方向上的大小，比例，对齐方式

?FlexLayout的外层容器元素叫做【flex container】，FlexLayout内部的子项元素叫做【flex item】 ?flex-direction：规定子项元素的排列方向，即【main axis】的走向 flex-direction有以下取值：row row-reverse column column-reverse ?flex-wrap：规定子项元素的换行方式 flex-wrap有以下取值：nowrap wrap wrap-reverse ?flex-flow：flex-direction和flex-wrap的简写属性 flex-flow: flex-direction flex-wrap

?justify-content：子项元素在【main axis】上的排列方式 justify-content有以下取值：flex-start flex-end center space-between space-around space-evenly ?align-content：子项元素在【cross axis】上的排列方式 align-content有以下取值：flex-start flex-end center space-between space-around stretch

?align-items：子项元素在【cross axis】上的对齐方式 align-items有以下取值：stretch flex-start flex-end center baseline ?order：子项元素在容器中的排列顺序，order相同按元素在文档中的位置排序 ?flex-grow：容器空间过大时，子元素分配剩余空间的比例 ?flex-shrink：容器空间不足时，子项元素空间缩小的比例

?flex-basis：子项元素所占初始空间大小

?flex：flex-grow，flex-shrink和flex-basis的简写 flex：flex-grow flex-shrink flex-basis 默认值为：0 1 auto

?align-self：子项元素覆写容器的align-items属性，采用自己的对齐方式

?容器元素设置了FlexLayout之后，其子项元素的float，clear和vertical-align等属性都将失效

?最后给出一个FlexLayout的实际Demo

		

			Header
			

				Main 
This is a FlexLayout Demo 
 This is a FlexLayout Demo 
 This is a FlexLayout Demo 
 This is a FlexLayout Demo
			
Aside-1Aside-2Footer