本文介绍了Flexbox布局的基础概念，包括flexbox的含义、在移动端H5开发中的重要性以及主要属性。内容涵盖容器上的属性如justify-content、flex-direction、flex-wrap、flex-flow、align-items和align-content，详细解析了各属性值的意义和应用场景，是理解Flex布局的良好起点。
flexbox是什么
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
抛开浏览器兼容性，对于移动端h5开发，简直是布局的神兵利器
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
属性列表
关于flex布局，有12个属性， 其中6个设置在容器上，6个设置在项目上。
设置在容器上的属性
- justify-content – 将flex元素和主轴对齐
- flex-direction – 定义主轴方向
- flex-wrap – flex元素必须单行或者自动换行
- flex-flow – flex-direction和flex-wrap的缩写
- align-items – 将flex元素在交叉轴上对齐
- align-content – 当交叉轴有多余空间时，对齐容器内的轴线
设置在项目上的属性
- order – 决定flex元素的顺序
- align-self – 自身对齐交叉轴，覆盖父元素设置的align-items
- flex-grow –定义项目的放大比例，
最低0.47元/天 解锁文章
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
