flex布局不常用到的属性整理

1.justify-content和align-items

• 常用的就不多哔哔了

2.flex-direction:

• row 默认水平排列
• column 纵向排列
• row-reverse 水平倒序排列
• column-reverse 纵向倒序排列

3.flex-wrap

• nowrap 默认不换行
• wrap 当水平排列没有空间时换行
• wrap-reverse 当水平排列没有空间时换行并且纵向倒序排列

4.order

• 加给flex盒子的子元素,让其按照规则排序
• 排序规则是order设置的数字越小 越靠前

5.flex-grow

• 加给flex盒子的子元素,设置子元素是否拉伸放大(占满剩余使用空间)
• 默认是值0,可以为小数
• 就算是子元素设置了宽度,也会随着此属性的设置而变化

6.flex-shrink

• 加给flex盒子的子元素,设置空间不足时是否缩小子元素
• 默认值时1,不缩小
• 设置为0时,表示即使空间不够,自身也不缩小
• 就算是子元素设置了宽度,也会随着此属性的设置而变化

7.flex-basis

• 加给flex盒子的子元素,会覆盖子元素自身原本的宽度
• 单位是px

8.align-self

• 只对设置了align-items的盒子生效
• 加给flex盒子的子元素,给其设置独立的对其方式