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