web随堂笔记

46 阅读1分钟

今天学习了 1.flex水平垂直居中设置

2.align-content换行对齐

3.flex-grow :1;定义项目放大比例

  1. flex-shrink

5.flex-basis

6.flex复合属性

1.flex水平垂直居中设置

margin: 0 auto;和justify-content: center;只能实现块元素的水平居中

而 align-items: center;能实现盒子在垂直方向居中 也就是单行的对齐方式

image.png

2.align-content

定义换行多行的对齐方式

image.png

align-content:center

image.png

align-content:flex-start

image.png

align-content:flex-end

image.png

align-content:space-around

image.png

align-content:space-between

image.png

align-content:space-between 默认值

image.png

允许单个项目有与其他项目不一样的对齐方式 可覆盖align-items属性

image.png

3.flex-grow :1;定义项目放大比例 默认为0

image.png

当中所有同级项目都设置flex-grow :1;时 会进行平均分配

image.png

  1. flex-shrink: 1; 表示项目是否被压缩比例 默认值为1,表示被压缩 改为0则不被压缩,把第二个盒子设置成不被压缩 其他两个盒子就压缩的更厉害

如果子元素过宽 都不设置被压缩就会超出父元素

image.png

5.flex-basis优先级比width高 同时设置时 只展示flex-basis的宽度

一行排不下还是会被压缩宽度

image.png

6.flex复合属性 flex可以设置复合属性:flex: flex-grow flex-shrink flex-basis; 例如flex:1 0 200px;