flex布局⽅法详解之flex-direction
本⽂结合⼩程序 来对flex布局做⼀个说明，⽤到了view组件，其实你只需要把view看成DIV就⾏了。
本节重点讲解⼀下flex的布局⽅式。
新建⼀个页⾯：
Flex 是 Flexible Box 的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。
菜鸟教程flex布局
任何⼀个容器都可以指定为 Flex 布局。
⽐如，你可以给⼀个DIV元素设置布局⽅式为flex，在⼩程序开发中，我们⼀般给view组件设置为f
lex布局。
Flex容器有多个属性。
问题1：如果不采⽤flex，你能否⽤DIV + CSS实现这种布局⽅式呢？
让我们尝试⼀下：
CSS：
结果：
显然，由于view是块级元素，和DIV类似，会占满⼀整⾏，所以图中的第⼆种布局⽅式可以轻松实现。那么问题来了，如果我要让1,2,3反着排列呢？
路⼈甲：“So Easy！把三个view反过来写不就好啦。”
诶，还真可以。但是啊，假如我不允许你反过来写呢？⽐如，我们做⼀个电影列表，接⼝查询出来的数据是根据⽇期正序排序的，⽽我们页⾯渲染的时候要求根据⽇期倒叙排序，你怎么办？当然了，你也许可以通过数组反转的⽅式来实现，可是万⼀我就是要求你通过css来实现呢？
显然，⽤传统的div+css很难实现这样的⼀个需求。我们在此可以采⽤flex技术。
⾸先，给box设置为flex盒⼦：
发现⼀件好玩的事情，三个view排在⼀排了。
现在，有请我们今天上场的第⼀位嘉宾： flex-direction ， 掌声欢迎！
flex-direction 属性决定主轴的⽅向（即⼦元素的排列⽅向）。
row（默认值）：主轴为⽔平⽅向，起点在左端。
row-reverse：主轴为⽔平⽅向，起点在右端。
column：主轴为垂直⽅向，起点在上沿。
column-reverse：主轴为垂直⽅向，起点在下沿。
原来如此啊，flex盒⼦有⼀个默认的属性，flex-direction:row，也就是说，他的⼦元素默认就应该是这样排列的。
让我们依次来看⼀看这位嘉宾的其他本领。
是时候展现真正的技术了~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。