扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在css中,我们可以使用flex去实现垂直居中,但是flex并不是一个很好的方法,现在很多浏览器并不支持flex,例如IE8,9。
创新互联建站主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务新丰,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
首先我们要先给图片添加一个div,并且定义为宽度为100px,高度也是100px,并且给它定义一些基本的属性,其中我们把div中的display元素设置成flex,然后把另外一条添加align-items:center属性。
css代码:
body{background:#999}
.flexbox{width:300px;height:250px;background:#fff;display:flex;align-items:center}
.flexboximg{width:100px;height:100px;align-items:center;}
如果情况容许的话,可以用以下方法,兼容性更好:
body{background:#ccc;}
.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}
.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}
很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的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()
关于书籍:需要学习资料的小伙伴们可以加群, 点击此处
弹性元素是 container直接的在文档流中的子元素
container在文档流中的子元素才是弹性子元素
弹性元素的默认宽高为内容宽高
flex-direction: row|row-reverse|column|column-reverse
container内的排列顺序: 从左往右 从右往左 从上往下 从小往上(都是从container对应方向边缘开始)
flex-wrap: nowrap|wrap|wrap-reverse
order: integer
initial: 0
两个黄色元素没有设置order, 默认为0
flex-basis: height|width
设置的是宽还是高根据主轴来定, 如果主轴是行则设置默认宽度, 如果主轴是列则设置默认高度
flex-grow: integer
initial: 0
弹性元素的宽或高计算:
flex-basis + flow-grow/sum(flow-grow)*remain
flex-shrink: integer
initial: 1
弹性元素的宽或高计算:
flex-basis + flow-shrink/sum(flow-shrink)*remain
这里的remain是负值, 表示超出的内容大小
flex: flex-grow || flex-shrink || flex-basis
initial: 0 1 main-size ( main-size 元素沿主轴方向默认尺寸)
justify-content: flex-start | flex-end | center | space-between | space-around
效果依次如下:
align-items: flex-start | flex-end | center | stretch | baseline
align-self: auto | flex-start | flex-end | center | baseline | stretch
initial: auto
当多行时: 应用于行
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局,且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候,其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素,当他们指定使用flex布局的时候,就被称为“ 容器 ”(flex container)
他们的子元素自动成为容器成员,被称为“ 项目 ”(flex item)。
flex布局是通过两根轴决定的,其实现方式其实和直角坐标系很像,都是通过轴来进行定位
每个容器都有两根轴,分别为水平的 主轴 (main axis)和垂直的 交叉轴 (cross axis)。主轴开始位置为main start,结束位置为main end。交叉轴的开始位置为cross start,结束位置为cross end
容器内的项目都是沿着主轴排列的,这点和块级元素有较大的不同,因为每个块级元素默认是占有一整行的,且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间,分别被称为main size和cross size
flex布局下,容器和项目都有其各自的属性
决定主轴的方向,即决定项目的排列方向,其属性值有
决定了当一行放不下所有的项目时,其换行与否以及换行方式
定义了项目在主轴上的对齐方式,假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式,假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items:baseline这个属性值。如描述,这个属性值是通过文字来进行对齐,而不是每个项目的边界或是中心
在容器内具有多根主轴线时,可以定义这些轴线的对齐方式
align-content属性和justify-content属性,这两者的属性值有较大的相似之处,这是因为,justify-content属性定义的是多个项目在主轴上的对齐方式,而align-content属性定义的是多根主轴在交叉轴上的对齐方式,这两者描述的对象就几乎一致
定义了多个项目的排列顺序,其使用方式和z-index属性值有异曲同工之处,都是指定属性值,属性值为整数。对于order属性,属性值越小,则排列越靠前;对于z-index属性,则属性值越小,就越在底层
设置了项目的放大比例,其默认值为1。
设置了项目的缩小比例,默认值为1。
在分配多余空间之前,为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式,其属性值和align-items的属性的属性值基本一致,不过其默认值为auto,表示继承父元素的属性值。
我们只会用到一点点儿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布局:实例篇》
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流