css—flex

这个主要是学习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容器

 .flexbox{
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-fles-wrap: wrap;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; 
 
　　
　　-webkit-box-align: center;
　　-webkit-box-pack: center;

　　-webkit-justify-content: center;
　　　　　　 justify-content: center;

　　-webkit-align-items: center;
　　　　　　align-items: center;

}

flex项目

.flexitem {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
｝

 在谷歌浏览器下测试，子项目，如果为直接设置width：200px，则在一行显示。如果同时设置min-200px; max-200px;则显示两行，情况不同

 虽然有那么几种写法方案，依然没有完全的支持换行和居中，谁有好用的呀