Flexbox入门：两个属性解决80%布局，不用float写定位

很多新手写CSS布局，还在用float、负margin写居中、写三栏布局，写得头大，今天说一下现在最常用的Flexbox布局，新手会两个属性就能解决80%的布局问题。

第一：水平垂直居中

以前写居中，要写absolute定位、transform，半天对不准，现在给父元素加display: flex; justify-content: center; align-items: center;，里面的子元素自动水平垂直居中，三行代码搞定，不用算偏移。

第二：横向一排排开

导航栏、按钮组、卡片列表，想让元素横向等距排开，父元素加display: flex; justify-content: space-between;，元素自动左右贴边，中间等距，不用写margin手动调，屏幕变窄自动适配。

新手别学全属性

Flexbox有十几个属性，新手别全背，就先记这两个场景：居中、横向排列，平时写布局90%的需求都够，剩下的属性碰到了再查，不用一开始就啃完所有文档。

现在做响应式布局，Flexbox是基础，会这两个，比写float布局省一半时间。