前端面试题–详解flex
Flex是指弹性盒子布局的意思
Flex的主要作用是:解决元素居中问题,自动弹性伸缩,自动适配不同大小的屏幕和移动端。
Flex的术语解释:二成员:容器和项目(container / item)
二根轴:主轴与交叉轴(main-axis / cross-axis)
二根线:起始线(main/cross-start)与结束线(main/cross-end)
容器container的属性设置:
- flex-direction 主轴方向
- flex-wrap 主轴一行满了换行
- flex-flow 1和2的组合
- justify-content 主轴元素对齐方式
- align-items 交叉轴元素对齐方式//单行
- align-content 交叉轴行对齐方式//多行
Flex-direction主轴方向
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)