css flex弹性布局

来源：flex弹性布局学习总结

---

相关名词

主轴（main axis）：代表行/列方向。即横或竖方向。
交叉轴（cross start）：与主轴垂直的方向。
“弹性”：适应力强，最终决定权在于布局。div、span等默认块、行级元素在该布局中默认行为一致；又如设定了一行4个控件每个宽30%，最终实际为每个宽25%。布局对于不合理的设置实施“弹性”控制。

---

设置在当前flex元素的属性

flex-direction和flex-wrap

flex-direction：设置主轴方向，默认row
flex-wrap：设置换行（若换行即可能有多个主轴），默认nowrap

justify-content

指示主轴方向上，各元素之间的排列方式。（即居中 等操作）

align-items

指示交叉轴方向上，元素自身的布局方式。（如横向的主轴，高度被撑开为100px，那么其中一个高10px的元素，该元素在垂直方向上居中 等操作）

align-content

指示交叉轴方向上，各主轴之间的排列方式，仅当多个主轴存在时有意义。（一个主轴时没有意义，因为该主轴就占满交叉轴方向的所有长度，不存在所谓的排列）

---

设置在其内部的元素的属性

flex-basis

表示项目在主轴上占据的空间，默认值为auto。即主轴方向为row时，flex-basis(如果有设置)取代掉width；为column时，取代掉height

flex-grow

默认0。当主轴方向有剩余空间时，可以取多少份的空间(比例)出来给该元素。注意当不为0时，即使设定好大小，最终也可被更改大小。

flex-shrink

默认1。当主轴方向不够空间时，欠缺的空间由各元素按比例变小。注意不为0时，即使设定好大小，最终也可被更改大小。(也就是说全为0时，拒绝变小，可能会超出父容器)

align-self

只为自己单独设置在交叉轴的位置(即不受align-items控制)。

---

注：display:flex;隐含两个行为，一是当前元素为块级元素即以display:block;存在，第二个为当前元素内部布局使用flex布局。
而display:inline-flex;为当前元素为行块级元素即以display:inline-block;存在，且内部布局使用flex布局。