flex布局阮一峰实战篇,弹性盒子布局flex 阮一峰
CSS布局 + Flex布局
我们只会用到一点点儿CSS布局的属性,虽然少,但既然要用到,就得把它们总结在这里,搞明白。
在了解CSS布局的相关属性之前,我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子,每个盒子从内往外有三个部分:
组件的宽度和高度决定了它在屏幕上显示的尺寸,一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度,iOS里也是这样的。
我们可以通过 width 和 height 属性给一个组件设置固定的宽度,不过需要注意 这两个属性只能接收数值,不能带单位,这是因为RN要自己去适配安卓和iOS的单位。
在RN里,我们想让一个组件自适应宽高,要分两步。 首先我们要让该组件撑满它的父视图,即如果我们想自适应宽度,就得先让子视图的宽度撑满它父视图的宽度,如果我们想自适应高度,就得先让子视图撑满它父视图的高度,如果我们宽度和高度都想自适应,就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样,通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。
这里再对第一步做个解释, item的 flex: 1 属性可以让item在主轴上撑满它的容器,容器的 alignItems: 'stretch' 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧,我们再通过一个例子来说得明了点,RN里不是默认主轴为竖向、侧轴为横向嘛,我们就采取这个默认状态来举例子。 在RN里,默认主轴为竖向、侧轴为横向的状态下,如果我们想让某个组件自适应高度,就得首先在它自身上设置 flex: 1 属性,来让它的高度撑满它的父视图;如果我们想让某个组件自适应宽度,就得首先在它父视图身上设置 alignItems: 'stretch' 属性(当然默认就是这个值),这还不够,你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ;如果我们想让一个组件自适应宽高,则两者都得做。 当然,如果我们设置了主轴为横向、侧轴为竖向,其实也是一样的道理,自己捋一下就知道怎么做了。如果还是看不懂的话,没有关系,下面我们会详细谈到这几个属性,等你学了这几个属性,反过头来看这里就明白了。
Flex是Flexible Box的缩写,可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写,就译为弹性盒子布局,用来对一个盒子进行灵活的布局。
在了解Flex布局之前,我们得先了解一下Flex布局里的两对儿 重要的 概念。
采用Flex布局的组件,被称为Flex容器(flex container),简称容器(container)。
这个组件上的子组件,被称为Flex项目(flex item),简称item(项目)。
我们可以把容器和item看做是父视图和子视图的关系, 因此下文中的容器、父组件、父视图将是一样的概念,item、组件、子视图将是一样的概念,组件和视图将是一样的概念。
每个容器都有两根轴,一个是 主轴, 一个是 侧轴 。
容器里众多的 item自动沿主轴进行排列。
一个item在主轴方向上所占据的空间称为 main size ,一个item在侧轴方向上所占据的空间称为 cross size 。
RN里主轴的默认方向为竖向,侧轴为横向。 浏览器里主轴的默认方向为横向,侧轴为竖向,下面我们讲Flex布局的属性时会采用浏览器的状态,学会后对应到RN里,换个主轴方向就可以了。
用在容器上的属性,最常用的有 5个 , 而且这些属性还都不是从来设置容器自己的布局,而是用来设置容器里item的布局。
flex-direction 属性用来设置主轴的方向,即容器里item自动排列的方向。 在浏览器里,主轴的方向默认为横向,所以 flex-direction 属性的默认值为 row 。
它有4种取值。
justify-content 属性用来设置item在主轴上的对齐方式。
它有5种取值。
align-items 属性用来设置item在侧轴上的对齐方式。
它有5种取值。
默认情况下,一个容器只有一条主轴,所有的item都会沿着这条主轴自动排列下去,但是如果item太多了,一个屏幕长度的主轴根本串儿不下这么多item,那后面的item就会溢出屏幕,而界面还不是 ScrollView ,不能滚动,怎么办呢?
flex-wrap 属性用来设置换行,即当容器主轴上显示不下那么多的item时,我们可以让item换行来显示,并且一旦设置了换行,那么这个容器就不再是一条主轴了,而是会有多条平行的主轴。
它有3种取值。
align-content 属性用来设置多条主轴的对齐方式, 如果项目只有一根轴线,该属性不起作用, 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。
它有6种取值。
用在item上的属性,最常用的有 2个 , 这些属性都是用来设置item自己的布局。
在第1小节容器的属性,我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式,但如果其中某个item不想遵循这个对齐方式怎么办呢?我们会常见到这种场景,10个里有8个item是一样的对齐方式,就有1、2个item特立独行,那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。
align-self 属性用来设置单个item在侧轴上的对齐方式, 注意是给特立独行的单个item设置哦,而且是侧轴,它会覆盖它容器的 align-items 属性,当然如果不设置这个属性,默认值就为 auto ,即item会默认使用容器的 align-items 属性给它设置的对齐方式。
它有6种取值,除了 auto ,其他都与 align-items 属性完全一致。怎么说呢,item的 align-self 属性似乎是用来造反的,反抗它容器的 align-items 属性。
flex 属性接收一个整数值, flex 属性描述起来太麻烦了,可以自行去搜索加深理解,我这里只列举出它的用途及注意事项。
(1) flex 属性有三个用途
(2)使用 flex 属性需注意
iOS里怎么使用Masonry布局的,RN里就怎么使用 Flex布局+CSS布局 来做布局就行了,它们布局的思路是一样的, 一个组件也同样至少需要四个约束。
当然,它们之间有一个极其细小的差别,那就是:上面提到的“RN里组件自适应宽高分两步”,而iOS里Masonry才不管你什么撑满不撑满呢。
当然,它们之间有一个极其巨大的差别,那就是:iOS里是没有主轴和侧轴之分的,你可以在一个父视图上横向、竖向同时放控件,并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分,我们添加的组件只会沿着主轴排列,不可能同时出现横向和竖向排列,并且布局的时候也只能是沿着主轴布局,不可能同时完成两个方向的布局。
下面我们就通过几个小练习,来对比一下Masonry布局和Flex布局+CSS布局的思路,加深对RN里怎么布局组件的理解。
Masonry:
Flex布局+CSS布局:
Masonry:
Flex布局+CSS布局:
Masonry:
Flex布局+CSS布局:
Masonry:
Flex布局+CSS布局:
参考博客:
阮一峰的《Flex布局:语法篇》
阮一峰的《Flex布局:实例篇》
【归纳】flex布局
说到flex布局,在我之前的影响中,只知道这是一种较传统布局较方便的布局,这种布局对我来说是全新的。在flex布局出现之前,我们使用的传统布局主要有以下几种:
这些传统的布局方式虽然可以满足我们的很多需求,但是也并不方便,比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”,flex布局有以下几个特点:
接下来就将对flex布局的几个重要知识点进行归纳。
采用flex布局的元素,称为flex容器(flex container)。它的所有子元素自动成为容器成员,称为flex项目(flex item)。
如上图所示,该flex容器在纵横有两根轴,其中横向的称为主轴(main axis),纵向的称为侧轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size,在侧轴方向的高度叫做cross size。
flex container(flex容器)有如下六个属性:
该属性主要有以下值:
该属性主要有以下值:
默认值为row nowrap,可以以如下方法设定该属性:
该属性主要有以下值:
该属性主要有以下值:
该属性主要有以下值:
flex item(子元素)有如下六个属性:
该属性默认值为0。
如果所有子元素的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个子元素的flex-grow属性为2,其他子元素都为1,则前者占据的剩余空间将比其他项多一倍。
该属性默认值为1。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来宽度。
默认值为0 1 auto。可以以如下方式设定该属性:
数值越小,排列越靠前,默认为0。
即不使用父元素决定的对齐方式,自身设定一个对齐方式。可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧
如果内容被修剪,需要浏览器显示滚动条,以便查看剩余内容,可以使用 over-flow:auto;
实现手机上中下布局:
以上就是我此次关于flex学习的一些记录。可以看出,这次学习是围绕着阮一峰的一篇关于flex的博客展开的,他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外,我在这里推荐两个关于flex学习的小游戏,寓教于乐,十分有趣。
博客原地址:
5.flex布局中对容器设置的属性有哪些
Flex布局中对容器一共有6个属性,作用如下:
flex-direction????????????主轴方向
flex-wrap??????????????????轴线排不下,如何换行
flex-flow????????????????????是flex-direction属性和flex-wrap属性的简写形式
justify-content??????????项目在主轴上的对齐方式
align-items????????????????项目在交叉轴上的对齐方式
align-content???????????定义多根轴线的对齐方式
搜一下“Flex?布局教程:语法篇”可以找到阮一峰的一个博客,讲得挺详细。
flex:1 表达的含义
flex 布局,我相信大家都非常熟悉, 但是要说到 flex:1 表达的含义,我相信很多同学说不出来。
很多同学入门flex 的时候,应该都是看了 阮一峰的flex 科普文章
想要梳理清晰flex:1的含义,我们先学习下flex 这个css属性表达了哪些含义
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
从这里就可以推导出
相当于
我一开始理解的也是这样。 后面的分析会推翻我这里的结论
flex-basis 也是一个比较难理解的点,我写了 深入理解flex-basis 来梳理这个知识点,不懂得可以查看。这里我们重点解析flex:1。
我写了一个简单的demo 来提供分析:
我们看下浏览器输出的效果:
可以看到,无论内容是多少,我们都实现等分。
我们看下控制台:
发现:
其实相当于:
看另一个例子:
浏览器显示效果:
依然是等分
再来一个类似的例子:
浏览器显示效果:
依然是等分
从以上的分析调试,我们可以初步分析
接下来,看下 flex: 1 1 auto 的效果
浏览器显示效果:
没有等分
写到这里,我们在细细品味下flex-basic的含义
auto 表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照剩余的空间,等比例缩放
如果随便设置一个其他带有长度单位的数字呢, 例如
又因为 c1.width = c2.width = c3.width,所以最终的效果就是 c1, c2, c3 进行了等分缩放。