flex布局入门

flex - 弹性布局

特点：简单 快捷 方便

兼容性： 现代浏览器对其兼容性已经很好，老古董ie 除外

flex相关概念示意图

container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向，后面的属性会详细说到。

先展示一下具体概念：

容器属性：

	属性名	属性的含义	属性值
容器属性	flex-direction	子元素的排列方向	row,row-reverse,column,column-reverse
容器属性	flex-wrap	容器中子元素排列不下时 采用的换行方式	nowrap,wrap,wrap-reverse
容器属性	flex-flow	flex-direction 及 flex-wrap的属性简写	默认值 row nowrap
容器属性	justify-content	子元素在主轴上的排列方式	flex-start,flex-end,center,space- between,space-around
容器属性	align-items	子元素在另一轴上的排列方式	flex-start,flex-end,center，baseline，stretch
容器属性	align-content	多跟轴线的对其方式	flex-start,flex-end,center，space- between,space-around，stretch
子元素属性	order	控制子元素的排列顺序	0,1… 数字越小越靠前
子元素属性	flex-grow	当有多余空间时子，子元素的放大比例，默认0，不放大	0,1,2…
子元素属性	flex-shrink	当空间不足时，子元素的缩小比例，默认1，进行缩小	1,0
子元素属性	flex-basis	子元素在容器中占据的空间	长度值，默认auto
子元素属性	flex	flex-grow，flex-shrink, flex-basis 合并写法	默认值 0 1 auto
子元素属性	align-self	单个子元素独特的对齐方式	同align-items 会覆盖 align-item

基本概念结束：

now !!!

code && demo
flex-direction

/*css*/
*{
   margin: 0;
     padding: 0;
 }
 .content{
     width: 800px;
     height: 500px;
     border: 1px solid #11caff;
     display: flex;
     flex-direction: row;
 }
 .item{
     border: 1px solid #000;
 }

/*dom*/
<div class="content">
   <div class="item">item1</div>
    <div class="item">item2</d