标签：
这个主要是学习http://www.w3cplus.com/css3/a-guide-to-flexbox.html这里的文章，做个记录，以备日后查询。
flex让容器有能力使得其中的子项目自由布局，充分利用空间。
比较适合应用程序的组件和小规模布局
flex包括容器 和 子项目两部分。
对容器来说，有以下属性可用。
display: other values | flex | inline-flex;
columns, float, clear和text-align在伸缩容器上无效
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align－item主要给出侧轴上的对齐方式，默认是stretch,拉伸以填充
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content为了给出在多行的情况下，多行之间的对齐方式
子项目可用属性如下
order: <integer>
flex-grow: <number> (默认值为： 0)
flex-shrink: <number> (默认值为： 1)
flex-basis: <length> | auto (默认值为： auto)
flex-grow，flex-shrink给出的是子项目对剩余空间分配所占的份额，负值同样有效. flex-basis也是剩余空间分配比率，负值不合法
flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
flex的后两个可选，默认是0 1 auto
align-self: auto | flex-start | flex-end | center | baseline | stretch
align－self用来在单独的伸缩项目上覆写对齐方式
兼容低版本的写法
flex容器
1 .flexbox{ 2 display: -webkit-box; 3 display: -moz-box; 4 display: -ms-flexbox; 5 display: -webkit-flex; 6 display: flex; 7 8 -webkit-box-lines: multiple; 9 -moz-box-lines: multiple; 10 -ms-fles-wrap: wrap; 11 -webkit-flex-wrap: wrap; 12 flex-wrap: wrap; 13 }
flex项目
.flexitem { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; ｝
在谷歌浏览器下测试，子项目，如果为直接设置width：200px，则在一行显示。如果同时设置min-width:200px; max-width:200px;则显示两行，情况不同
标签：
原文地址：http://www.cnblogs.com/jingwensophie/p/4742456.html
