传统布局方式基于浮动和定位方式对网页进行布局,但是布局灵活性太差
Flex布局又叫弹性布局 大大提高盒子模型布局的灵活性
基本介绍
采用Flex布局的元素 又称Flex Container(容器)
容器由主轴(main axis)和交叉轴(cross axis)决定了自身大小 起始方向 从左到右 从上到下
容器属性
flex-direction(主轴方向): row row-reverse 主轴水平 column column-reverse 主轴垂直
flex-wrap(轴线是否换行): nowrap wrap wrap-reverse
flex-flow(上两个属性的简写形式):默认值 row nowrap
justify-content(主轴对齐方式):flex-start flex-end center space-between space-around
align-items(交叉轴对齐方式):flex-start flex-end center baseline stretch
align-content(多根轴线的对齐方式)
更多属性 请查阅文档
