flex学习笔记

在网上学习了flex布局，决定自己总结一下用法。

容器属性：

想要实现flex布局，前提是设置容器的display为flex，这样就可以使用flex的属性进行布局了。flex布局基于主轴和交叉轴，元素根据主轴和交叉轴进行相应的排列。

属性1：flex-direction：设置主轴的方向，默认值是row，即根据水平轴从左至右排列元素；可选值：colum、row-reverse、column-reverse分别对应↓、←、↑。

属性2：flex-wrap：设置排列的元素超出容器宽度时是否换行，默认值是nowrap（不换行）；可选值：wrap（换行），wrap-revers（反向换行）。

属性3：justify-content：设置元素在主轴上的排列方式，默认值是flex-start（从主轴的起始点开始排列）；可选值：flex-end：从主轴的末尾开始排列；center：根据主轴居中排列；space-between：元素平均分布在主轴上，头尾不留间隙；space-around：元素平均分布在主轴上，头尾不留间隙；initial：该关键字用于设置 CSS 属性为它的默认值，css里该关键字通用；inherit：根据父元素继承该属性，css里该关键字通用；

属性4：align-item；属性5：align-content；

属性4可以和属性5一起解释一下，因为两个属性容易混淆。

flex学习笔记

原文：https://www.cnblogs.com/akunz/p/11018336.html