css基础之flex布局

html-css019

css基础之flex布局,第1张

很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君羊- 点击此处 ,

同时准备了基础,进阶学习资料。学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的缩写,意为 弹性布局

flex布局中把一个元素作为容器,容器中的子元素称为项目

可以通过容器的flex属性,设置所有项目的排列样式。也可以通过项目的flex属性,设置指定项目的排列样式。

2.flex布局的方向

flex布局项目的排列方向可以有两个维度,一水平,二垂直

项目排列方向称为主轴,与主轴垂直的方向叫交叉轴

在每个轴上有两个方向,从左至右,从右到左;从上到下,从下到上。

2.1 flex水平布局

在水平维度,默认方向是从左至右

可以通过 flex-direction:row-reverse设置为从右到左排列

效果图:

1).默认方向,从左至右

2).反方向

2.2 垂直布局

效果图:

1).默认方向,从上到下

2).反方向

3. 容器内项目换行

通过flex-wrap属性,设置项目在容器内是否可以换行,默认不允许换行。

不换行的称为单行容器,换行的称为多行容器

也可以通过flex-flow属性同时设置容器主轴方向和是否换行(推荐使用)

效果图:

1).默认不允许换行,项目被压缩

2).允许换行,当剩余宽度不足容纳一个项目块时,就换行

相关知识:

css如何实现边框长度控制功能

详细介绍css中的数学表达式calc()

关于书籍:需要学习资料的小伙伴们可以加群, 点击此处

flex布局又称为弹性布局,相对于更早出来的float浮动布局更加方便,在兼容性方面还有不足,但随着很多浏览器版本的淘汰,今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

1.flex container

2.flex items

如图所示:

flex布局包含两个重要的轴,main axis和cross axis,各自起点、终点分别对应strat和end。了解到flex布局的基本原型后,我们来看看其属性,属性又分为flex container的属性和flex items的属性,如下图:

默认情况下flex的排列方向为main start到main end,当切换到其他属性时:

flex-direction:row-reverse

flex-direction:column-reverse

1.2justify-content属性

justify-content属性表示flex items在main axis上的对齐方式,其值有center、flex-start、flex-end、space-between、space-around。

justify-content:center

justify-content:flex-end

justify-content:space-between

是每个items间隔相等

justify-content:space-around

items间的间隔是边缘间隔的两倍

1.3align-items

align-items属性决定了items在cross axis的对齐方式,属性值有stretch、flex-start、flex-end、center、baseline

stretch属性值为align-items的默认属性:当items在cross axis方向的size为auto时,会将其自动拉伸填充整个flex container,如:

align-items:flex-start

items与cross start对齐

1.4flex-wrap

flex-wrap属性是控制items换行的,其属性值有:nowwrap、wrap、wrap-reverse

flex-wrap:nowwrap默认值不换行,每个items会自动调整宽度填充完整个flex container

1.6align-content

align-content:flex-start(这就解决了上述中换行没有紧挨的问题)

align-content:flex-end

align-content:center

align-content:space-between(两端cross start 与cross end对齐)

align-content:space-around(与justify-content一样)

align-content:space-evenly

二、flex items上的css属性

2.1order

order属性决定items之间的排列的先后顺序,如图将原本排列的模块倒序排列如下所示,可知order越小排在越前。

2.3flex-grow

flex-grow属性用来对items的宽度进行放大,默认值为0,这里3个items的初始宽度为100px,离flex container边缘还有200px,当将3个items的flex-grow设置为1时,则每个items的宽度增加200px的三分之一,如:

我们只会用到一点点儿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布局:实例篇》