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

Flex 布局语法

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

flex布局

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

.box{
display: -webkit-flex; /* css hacker*/
display: flex;
display: inline-flex;/*行内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:<flex-direction> || <flex-wrap>;
/*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;
/*与交叉轴起终中均隔空扰填充对齐*/

2.项目属性

• order
  ```.item {
  order: <integer>;
  /项目的排列顺序，从左至右递增/
  }

• flex-grow

   flex-grow: <number>; 
   /*放大比例 default 0，越大越大 */

• flex-shrink

  flex-shrink: <number>; /*缩小比例 default 1 ，越小越小*/

• flex-basis

 flex-basis: <length> | auto; 
 /* 分配多余空间之前，项目占据的主轴空间（main size）default auto */

• flex

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  /* flex-grow, flex-shrink 和 flex-basis的简写 default 0 1 auto */

• align-self

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  /* 允许单个项目有与其他项目不一样的对齐方式default auto */

  参考链接