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

相关文章

来自专栏知晓程序

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

973
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

1543
来自专栏黑泽君的专栏

事件监听机制的通俗解释

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

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

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

2007
来自专栏james大数据架构

原生JS编写的照片墙效果实例演示特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

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

html+css学习笔记007-样式优先级0外链css样式表

722
来自专栏cs

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

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

2274
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

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

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

913
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

693

扫码关注云+社区