一台电脑
一个浏览器
水平垂直居中
flex-direction 主轴的方向
flex-wrap flex子项是否换行
flex-flow flex-direction/flex-wrap的简写
justify-content flex子项在主轴上的对齐方式。
align-items flex子项在交叉轴上的对齐方式
align-content 多条主轴在交叉轴上的对齐方式
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为0，可以为负值。
flex-grow 定义子元素在主轴的放大比例，前提是存在剩下空间用于放大。 该属性来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。【默认为0，表示不放大。】
flex-shrink 定义了子元素的缩小比例。 前提是空间无法装下盒子大小，默认为1，即如果空间不足，该子元素将缩小。负值对该属性无效。如果值为0，表示不减小。
flex-basis 定义了子元素在主轴上占据的大小(==width:nrem)它的默认值为auto，即子元素的本来大小。它可以设为跟width或height属性一样的值（比如350px），则子元素将占据固定空间。如果子元素上同时设置了在主轴方向上的width/height和flex-basis,那么flex-basis会覆盖width/height的值。
flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self 控制单个元素在交叉轴上的对齐方式 align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性（还有五个值写法和align-items一样）。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
如果您觉得我的经验稍微有点作用的话，请给我点下赞或投下票，如果有疑惑可以给我留言，看到后我会回答的^_^