flex布局

2022-12-21 74 阅读1分钟

`默认从左侧依次排列 justify-content: flex-start;`

`右侧依次排列 justify-content: flex-end;`

`居中对齐 justify-content: center;`

`每个盒子都有间隙,中间是两边的二倍 justify-content: space-around;`

`两侧没有间隙 justify-content: space-between;`

`盒子间隙一样大 justify-content: space-evenly;`

`盒子从顶部开始排列 align-items: flex-start;`

`盒子从底部开始排列 align-items: flex-end;`

`盒子垂直居中对齐 align-items: center;`

`拉伸 align-items: stretch;`

注意事项：align-self属性是给弹性盒子设置（子级）

`控制弹性盒子 align-self: center;`

控制弹性盒子 align-self: flex-start; //顶部对齐 控制弹性盒子 align-self: flex-start; //底部对齐