跳到主要内容
江山录
知识梳理
开发导航
工具箱
👨💻 个人介绍
🔥 我的作品
Gitee
搜索
元素数量:
容器样式
换行方式:
nowrap(默认单行)
wrap(多行)
wrap-reverse(反转排列)
方向位置:
row(默认 左对齐)
row-reverse(右对齐)
column(纵向排列)
column-reverse(反转纵向排列)
内容对齐:
flex-start(默认 行头紧挨着填充)
flex-end(行尾紧挨着填充)
center(居中紧挨着填充)
space-between(平均分布在行上)
space-around(平均分布在该行上,两边留有一半的间隔空间)
纵向对齐:
flex-start(默认 (纵轴)起始边界)
flex-end((纵轴)结束边界)
center((纵轴)居中放置)
baseline
stretch
各行对齐:
stretch(默认 各行将会伸展以占用剩余的空间)
flex-start(各行向容器的起始位置堆叠)
flex-end(各行向容器的结束位置堆叠)
center(各行向容器的中间位置堆叠)
space-between(各行在弹性盒容器中平均分布)
space-around(各行在弹性盒容器中平均分布,两边留有一半的间隔空间)
min-height: 600px;
display: flex;
CSS弹性盒子布局工具
1
2
3
4
5
6
7
8
子元素垂直居中
display: 'flex';
align-items: 'center';
justify-content: 'center';