今天我们来个庖丁解牛。对于一个完整的组合组件，看看通过工具是如何轻松完成的。
首先看看九宫格完整的样子。
 
display、flex-direction、flex-wrap这三个属性告诉浏览器我要用flex布局，并且横向排列和换行。
justify-content、align-items和align-content都是flex-start，决定了内部组件在x轴是从原点向右紧挨着排列，在y轴上从原点向下紧挨着排列。这样就决定了9个item是从左上角向x和轴排列。当然我们也可以将这三个属性设置为center，表示从view的中心向四面排列，也可以做出9宫格。
flexbox属性的组合很多，实际开发时结合此工具的使用可以做到事半功倍的效果。通过工具中属性的更改，便可所见即所得。
工欲善其事必先利其器，熟练掌握一个工具的使用，势必提高我们的开发效率。大家刚开始使用此工具时，更多的变幻一下flexbox的属性，看看布局效果。当完全掌握后，会起到意想不到的效果。