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 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:Absolute Positioning就这个样

前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还...

1897
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

4376
来自专栏wOw的Android小站

[Android] 使用MediaProjection截屏

Android5.0以上提供了MediaProjection,方便截屏录屏等功能。

1111
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发从零开始开发一款H5小游戏(三) 攻守阵营,赋予粒子新的生命

每个游戏都会包含场景和角色。要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来。 场景坐标 canvas 2d的场景坐...

33012
来自专栏前端小叙

html5简单拖拽实现自动左右贴边+幸运大转盘

此篇文章主要实现两个功能: 1、点击屏幕下方签到悬浮按钮; 2、弹出幸运大转盘,转盘抽奖签到 效果如图: ? ​ ? 在网上找了很多移动端拖拽的js实现方式,大...

3285
来自专栏Coco的专栏

不可思议的纯CSS导航栏下划线跟随效果

1263
来自专栏Coco的专栏

不可思议的纯CSS导航栏下划线跟随效果

1283
来自专栏前端新视界

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点。没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风...

17610
来自专栏hightopo

基于 HTML5 WebGL 的低碳工业园区监控系统

987
来自专栏sunseekers

我不知道你知不知道我知道的伪元素小技巧

伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

682

扫码关注云+社区