flex布局

阮一峰——Flex 布局教程
Flex
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器属性（父级div）

• flex-direction(主轴排列方向)：row | row-reverse | column | column-reverse
• flex-wrap(排列方向)：nowrap | wrap | wrap-reverse
• flex-flow：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（默认值）：轴线占满整个交叉轴

项目属性（子div）

• order：定义项目的排列顺序
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大(如果所有项目都有，剩余宽度则按照比例分)
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小(如果所有项目都有，则按照比例分，为0不缩小，负值无效)
• flex-basis：默认值为auto，即项目的本来大小。
  • flex-basis 是设置项目 占据主轴空间的大小、不全等于width
  • flex-basis 优先级比 width 更高
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self：单个项目与其他项目不一样的对齐方式，flex-start | flex-end | center | baseline | stretch | auto （align-items属性）

决定 flex items 最终 base size 的因素，从优先级高到低

• max-width\max-height\min-width\min-height
• flex-basis
• width\height
• 内容本身的 size

flex缩写属性

• 给一个或多个子元素设置了flex: number后，会将那个子元素或者那些子元素的宽度+父元素剩余的宽度按比例重新分配
• flex:1：会被当做flex:1 1 0，flex-basis暂定为0，没有宽度，flex-grow又设置为1，就占用了全部的宽度。

flex双值语法

• 第一个值必须为一个无单位数，并且它会被当作 < flex-grow> 的值
• 第二个值必须为以下之一
  • 一个无单位数：它会被当作 < flex-shrink> 的值
  • 一个有效的宽度值: 它会被当作 < flex-basis> 的值

flex三值语法

• 第一个值必须为一个无单位数，并且它会被当作 < flex-grow> 的值
• 第二个值必须为一个无单位数，并且它会被当作 < flex-shrink> 的值
• 第三个值必须为一个有效的宽度值， 并且它会被当作 < flex-basis> 的值