今天学习了 1.flex水平垂直居中设置
2.align-content换行对齐
3.flex-grow :1;定义项目放大比例
- flex-shrink
5.flex-basis
6.flex复合属性
1.flex水平垂直居中设置
margin: 0 auto;和justify-content: center;只能实现块元素的水平居中
而 align-items: center;能实现盒子在垂直方向居中 也就是单行的对齐方式
2.align-content
定义换行多行的对齐方式
align-content:center
align-content:flex-start
align-content:flex-end
align-content:space-around
align-content:space-between
align-content:space-between 默认值
允许单个项目有与其他项目不一样的对齐方式 可覆盖align-items属性
3.flex-grow :1;定义项目放大比例 默认为0
当中所有同级项目都设置flex-grow :1;时 会进行平均分配
- flex-shrink: 1; 表示项目是否被压缩比例 默认值为1,表示被压缩 改为0则不被压缩,把第二个盒子设置成不被压缩 其他两个盒子就压缩的更厉害
如果子元素过宽 都不设置被压缩就会超出父元素
5.flex-basis优先级比width高 同时设置时 只展示flex-basis的宽度
一行排不下还是会被压缩宽度
6.flex复合属性 flex可以设置复合属性:flex: flex-grow flex-shrink flex-basis; 例如flex:1 0 200px;