flex

新版语法

定义容器的display属性

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

行内flex

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

容器样式

• 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;
  交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）

• align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 左右对齐并铺满 | 轴线占满整个交叉轴。（默认）

子元素属性

• order: <integer>;
  排序：数值越小，越排前，默认为0

• flex-grow: <number>; /* default 0 */
  放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）

• flex-shrink: <number>; /* default 1 */
  缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。）

• flex-basis: <length> | auto; /* default auto */
  固定大小：默认为0，可以设置px值，也可以设置百分比大小

• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，

• align-self: auto | flex-start | flex-end | center | baseline | stretch;
  单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满