CSS3新属性之---Flex 布局语法

常见网页布局:
传统做法: 基于box model，借助css的display+position+float
属性。但对于特殊布局非常不友好。
2009年W3C提出flex布局，简洁方便完整地实现了响应式布局，且已得到所有浏览器支持。

flex布局 1.flex box语法---任何容器均可设为flex布局

.box{
display: -webkit-flex; 
display: flex;
display: inline-flex;
}

概念

flex container:采用flex布局的元素即为flex容器，其子元素为容器成员（flex item）

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

- flex-direction : row | row-reverse | column | column-reverse;

- flex-wrap:nowrap | wrap | wrap-reverse;

- flex-flow: || ;

- 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
  ```.item {
  order: ;
  /项目的排列顺序，从左至右递增/
  }

• flex-grow

   flex-grow: ; 
   

• flex-shrink

  flex-shrink: ; 

• flex-basis

 flex-basis:  | auto; 
 

• flex

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  

• align-self

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  

  参考链接