flex 布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

基本概念

flex布局元素分为：容器（flex container） 与 项目（flex item）

容器属性

1
2
3
4
5
6
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目属性

1
2
3
4
5
6
order
flex-grow   // 默认 0
flex-shrink // 默认 1
flex-basis
flex
align-self

其中 flex 有三个属性 flex

flex布局

See the Pen grid layout by chris (@isevenfox) on CodePen.