[CSS] Flex布局

快速参考

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

定义于 flex-container 上的属性(第一个为默认值)

// 主轴方向
flex-direction: row | column | row-reverse | column-reverse

// 主轴换行规则
flex-warp: 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

// 多个主轴(换行产生的, 如果主轴不换行那只有一个主轴)在交叉轴方向上的排列方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch

定义于 flex-item 上的属性(第一个为默认值)

// 排列顺序, 越小越靠前
order: <integer 0>

// 放大比例, 默认为0, 即主轴有多余空间也不放大
flex-grow: <number 0>

// 缩小比例, 默认为1, 即主轴空间不足时各个项目等比例缩小
flex-shrink: <number 1>

// 项目默认占据的主轴空间, 默认为auto, 即项目本身的大小
flex-basis: auto | <length>

// flex-grow, flex-shrink, flex-basis的简写, 可以忽略不计
flex: <flex-grow> <flex-shrink> <flex-basis>

// 覆盖flex-container上设置的align-items属性
// 只在设置了这个属性的单个项目上生效
// 从而可以让单个项目的对齐方式与其他项目不同
// 默认为auto, 表示继承父元素的align-items属性
// 如果没有父元素, 则等同于stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch

参考文章:
语法篇
实例篇
flex布局实例