Flex布局专题
-
Flex布局,就是 flexible box(弹性布局)
-
注意事项: 当对容器使用flex布局以后
子元素的 float/clear/vertical-align属性将失效 -
flex项目(flex item): 就是容器的子元素
-
容器默认存在两根'轴'
-
水平主轴(main axis)
-
垂直交叉轴(cross axis)
-
-
以下6个属性设置在容器上(即,属于容器的属性)
- flex-direction(主轴方向)
- flex-wrap(折行)
- flex-flow
- justify-content(主轴方向上,项目如何排列)
- align-items(交叉轴方向上,项目如何排列)
- align-content(折行以后,项目之间的间距)
flex-direction 有4个值
- flex-direction: row/row-reverse/column/column-reverse