CSS3中flex布局的flex-basic、flex-grow、flex-shrink

基本概念

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

如何转换为Flex布局

• 任何一个容器都可以指定为Flex 布局。

.Box{display:flex;}

• 行内元素也可以使用Flex布局。

.Box{display:inline-flex;}

• webkit内核的浏览器，必需加上-webkit前缀

.Box{
  display:-webkit-flex;
  display:flex;
}

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

Flex布局的属性

当谈到flex布局时，可能大部分人都和我一样，除了最常用的justify-content与align-items两个属性，其他的属性用到的并不多。

其实，Flex布局是一个完整的模块而不是一个单独的属性，它包括了完整的一套属性。其中有的属性是设置在容器（container，也可以叫做父元素，称为flex container）上，有的则是设置在容器的项目上（item，也可以叫做子元素，称为flex items）上。

那么我们将从 容器上的属性 和 项目上的属性 分别来讲起：

容器的属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）。

.Box {flex-direction:row | row-reverse |  column | column-reverse;}

项目的属性

以下6个属性设置在项目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self