flex布局

[记录我需要使用的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，将占满整个容器的高度。

未完、、

参考资料：
阮老师