[记录我需要使用的flex相关知识点]
概念
用了flex布局的,就叫flex容器,可以直接叫容器。
容器里的所有子元素都叫flex项目,可以直接叫项目。 横为主轴(main axis);竖为交叉轴(cross axis);容器属性
justify-content
项目在主轴上的对齐方式
- flex-start 一起左对齐
- flex-end 一起右对齐
- center 一起居中 【左右居中用!】
- space-between 两端对齐
- space-around 主轴上 项目两侧间隔相等
align-items
项目在交叉轴上的对齐方式
- flex-start 交叉轴起点对齐
- flex-end 交叉轴终点对齐
- center 交叉轴中点对齐【上下居中用!】
- baseline 项目的第一行文字的基线对齐
- stretch (默认)如果项目未设置高度或设为auto,将占满整个容器的高度。
未完、、
参考资料: