Weex开发4（盒模型布局+理解）

最近一周都在写<div><text><image><list>各种标签，以前也不是很熟，在布局方面也踩了不少的坑，但是看了看网上的一些推荐和自己写的一些东西，总结出了Css的简单理解<-------------盒子-------------->

1.在前端代码中任何的布局，代码样式，都是一个盒子,<div>就是一个盒子，里面可以放<text><image>，

可以通过调整   flex-direction  来改变里面的显示布局

flex-direction《flex-direction定义了 flex 容器中 flex 成员项的排列方向，默认值为 column》

column：从上到下排列。
column-reverse: 从下到上排布
row：如果存在direction:ltr，则从左到右排布；如果存在direction:rtl，则从右到左排布。
row-reverse: 排布方向与flex-direction:row相反

 

flex-wrap
flex-wrap属性决定了Flex成员项在一行还是多行分布，默认值为nowrap

nowrap: Flex成员项在一行排布，排布的开始位置由direction指定。
wrap：Flex成员项在多行排布，排布的开始位置由direction指定
wrap-reverse: 行为类似于wrap，排布方向与其相反。

justify-content
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。

flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
flex-end：则意味着成员项排列在容器的后部；
center：即中间对齐，成员项排列在容器中间、两边留白；
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。

align-items
定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。

stretch 是默认值，即拉伸高度至 flex 容器的大小；
flex-start 则是上对齐，所有的成员项排列在容器顶部；
flex-end 是下对齐，所有的成员项排列在容器底部；
center 是中间对齐，所有成员项都垂直地居中显示。

Flex 成员项
# flex
flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的 2 倍。Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。

flex {number}：值为 number 类型。该属性不支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写。

其实有了上面这些简单的了解我们做一些简单的视图布局就没有问题了，菜鸟简述。