专栏首页web编程技术分享flex布局方法详解之flex-direction

flex布局方法详解之flex-direction

首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文结合微信小程序 来对flex布局做一个说明,用到了view组件,其实你只需要把view看成DIV就行了。

本节重点讲解一下flex的布局方式。

新建一个页面:

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

比如,你可以给一个DIV元素设置布局方式为flex,在微信小程序开发中,我们一般给view组件设置为flex布局。

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,也就是说,他的子元素默认就应该是这样排列的。

让我们依次来看一看这位嘉宾的其他本领。

是时候展现真正的技术了~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flex布局方法详解之flex-wrap

    剽悍一小兔
  • Error configuring application listener of class org.springframework.web.context.ContextLoader

    剽悍一小兔
  • 【H5 音乐播放实例】第一节 音乐详情页制作(1)

    剽悍一小兔
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有...

    pingan8787
  • css3 flex弹性布局总结

    本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的...

    十月梦想
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技
  • 深入 CSS 中的弹性盒子 Flexible Box

    弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。

    IT技术小咖
  • flexbox 布局

    即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

    双面人
  • 10分钟理解CSS3 FlexBox

    设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

    MudOnTire
  • css3 Flex布局 学习

    在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴...

    heidsoft

扫码关注云+社区

领取腾讯云代金券