flex速记

1. flex容器属性6个

flex-direction: 主轴方向
flex-wrap: 换行方式
flex-flow: <flex-direction> <flex-wrap> 简写
justfiy-content: 主轴对齐方式
align-items: 纵轴对齐方式
align-content: 多主轴时候,纵轴对齐方式

2. flex项目属性6个

order: 项目的排列顺序
flex-grow:项目的放大比例
flex-shrink:项目的缩小比例
flex-basis:项目占据的主轴空间(main size)
flex:flex-grow | flex-shrink | flex-basis
align-self:单个项目有与其他项目不一样的对齐方式


3. flex:1

flex:1 自适应剩余所有空间

flex: 1 === flex: 1 1 0%

上一篇:前端应该算是目前程序员里最简单且收入不低以及压力比较小的工作了


下一篇:小程序使用弹性布局