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

相关文章

来自专栏coding for love

CSS入门7-三大特性之继承特性

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

912
来自专栏cs

学markdown怎能不知道与之相关的html了include <iostream>

<h2>导言</h2> <strong> markdown,hthl都是超文本标记语言,markdown是简化版本的html,兼容html语言,熟悉一下ht...

2314
来自专栏狮乐园

interview record 20160822

问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道...

783
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题

1615
来自专栏超然的博客

灵异留白事件——图片下方无故留白

本人在实践过程中偶尔遇见此等不解的状况,但往往睁一只眼闭一只眼,采取另外的方式了,而今看到原博主的一篇文章,大受启发,希望对各位博友也有所帮助~

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

CSS魔法堂:重拾Border之——更广阔的遐想

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

1945
来自专栏菜鸟前端工程师

html+css学习笔记003-样式初始化

1023
来自专栏xingoo, 一个梦想做发明家的程序员

[Canvas前端游戏开发]——FlappyBird详解

一直想自己做点小东西,直到最近看了本《HTML5游戏开发》,才了解游戏开发中的一点点入门知识。 本篇就针对学习的几个样例,自己动手实践,做了个FlappyB...

2127
来自专栏前端迷

双十一,教你给你女朋友不一样的表白(程序员版)

https://ru23.com/11?name=front,这样会自动把源码中you换成女朋友的名字

2424
来自专栏知晓程序

有趣的文字千篇一律,加了「下划线」万里挑一 | 晓技巧

1103

扫码关注云+社区