来源：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布局。
网友评论