00:00
大家好,我是上硅谷H5学科严老师,在程序员节日到来之际,和大家呢分享一道面试题,使用flex实现元素的水平垂直居中,并且使用新版本和我们最终的老版本。那好,那接下来我们说先抛开我们这个flex,我们先看一下元素的水平居中都有哪些方案,这个时候呢,我们给大家准备了一个元素来负元素我的wiper子元素我的盒子box,负元素的基本要是宽度和高度区为500,颜色区域呢为我们最终的一个灰色区,紧接着我的紫元素实现的效果是一个宽200,高200,最终颜色呢为我们最终的一个粉色区。那接下来我们说打开浏览器,我们看一下我们最终的一个效果,是这样一个效果呀,而我们最终想要实现的效果是这样的一个效果,这明显是不是一个居中的方式,那好,那接下来我们说想要让我的粉元素粉。
01:01
的盒子,在我这个灰色盒子里边实现水平居中,那我们之前的方式都是怎么做的呢?那我们之前是这么做的,需要给我的负元素是不是写一个position relative相对定位啊?而最终我的子元素是不是需要写一个position absolute的绝对定位?接下来我的top值,包括我们的left值,我的right值,我们的bottom值是不是同一为零?这个时候我们还需要给它加上一个margin凹two,是不是可以实现我们最终元素水平垂直居中?来我们刷新一下是不是这样一个效果啊,对吧?来,那好呢,这是我们之前做的第一种方案,来除了这种方案之外,不知道大家还记不记得其他的方案是吧?来回忆一下其他的方案,Position absolute top值我们可以给它指定成5%十来,Left值我们也给它制定成我们最终的50%指定完。
02:01
完成之后我们重新打开浏览器,先来看一眼是不是在这个位置上,这个位置你明显能看到我的这个点是不是正好是负元素的正中心点,而我最终的子元素的位置大体的呈现结果是不是应该在这个位置上,也就证明我当前粉丝的盒子沿着我当前这个点,横向是不是要移自身的一半,纵向是不是也要移自身的一半啊,对吧?来这时候我们说需要可以这样做,怎么做呢?给他指定一个margin left为负的多少啊,自身的一半是不是100PX?来再给他指定一个margin top,你往左移,总之你是不是还得往上移啊,这个时候再给它指定成100PX,找到它之后,我们接下来刷新最终的元素,是不是也可以实现水平垂直居中啊?来,除了这两种方案之外呢,我们说最终我们在CSS3里边,我们是不是讲了一个这个东西。
03:01
Transform translate让我的元素是不是要发生平移,而平移里边使用的百分比是不是恰巧是参照与自身的比例拿的呀,所以呢,接下来这个值我们可以直接写成谁呀,对50%,负的50%,因为你往上往左移,所以这个百分之应该为负值。来这时候我们刷新,你看元素实现的效果同样是不是水平垂直居中,那好,那接下来我们说到目前为止,我们这些方式都是我们之前讲过的元素的水平垂直居中,接下来我们看一下这个题目的要求,题目要求让我们采用的形式是不是flex来实现一下元素的水平居中啊来接下来呢,我们先讲一下最终的新版本,我说讲新版本之前,我们需要了解一下这个flex使用的一个基本的模型。来,我们给大家画一下这个元素呢,我们把它看成是负元素,使用Lex,你有负元素,紧接着里边是不是要有相应的子元素啊,来里边这两个盒子呢,我们把它看成是子元素,只不过此时这个负元素对于我的Lex来讲,它是不是换了一个名字,俩来换了一个名字叫什么呢?叫容器,诶叫容器,紧接着我的子元素最终画的名字,我们是不是管它叫做项目啊,对吧,叫伸缩项目,我们管它叫做项目,那接下来我们说这个模型画完之后,我的页面对于我的整个负容器之后,就会出现两个轴,默认横向的这个轴。
04:44
我们管它叫做主轴来,主轴默认左边是主轴的起始的地方,开始的地方来,主轴右边的这个地方是主轴结束的地方,这是我们看到的主轴,那同样我们说主轴完成之后,接下来我们再看另外一个方向,就是垂直方向,垂直方向的这个轴呢,我们管它叫做侧轴来,侧轴默认上方是侧轴的开始的地方,下方是我们侧轴结束的地方,这是我们最终flex格子模型使用的一个简单的基本模型,这个你要清楚,那好,那接下来我们说flex的基本模型出来了,那我们到底怎么用呢?很简单,只需要给我们最终的副元素设置一个display flex来,副元素设置完display flex之后,我们重新打开浏览器来看一下副元素当前是不是在这儿,所以对于。
05:44
副元素这个方向的轴线来讲,是不是我们最终的主轴,而最终我的粉色盒子想要处理水平之中,那也就证明我的粉色盒子是不是应该在主轴水平方向正中间呀,对吧?所以呢,接下来我们需要给我的副元素设置一个属性,操作一下justify content,操作一下我们主轴上的子元素,让我的子元素处在居中水平句中,Justify content设置成我们的center来这时候刷新。
06:21
你看现在元素是不是处在水平居中啊,那接下来我们说垂直居中,垂直居中无非你是不是要操作当前负元素最终的一个侧轴,而最终侧轴操作的时候是不是想让子元素在我侧轴中间方向显示啊?那接下来我们直接需要给我的元素来设置一个来alone it设置成我们的center,这时候我们整体刷新,你看现在这里边是不是就实现了元素的水平居中啊?所以呢,接下来我们说这三行是采用我们最终flex最新的版本实现了元素的水平垂直居中,来接下来我们把它注上,我们演示一下我们最终的老版本,老版本怎么设置呢?老版本需要这样去设置play,你要给我们加一个web k来box,通过这个属性来设置,来设置完成之后,那接下来我们重新进入页面。和我。
07:21
默认上来的情况是不是一模一样啊?接下来我们说原理是一样的,操作一下我们最终的主轴方向,但是主轴的名字不叫justify contain了,这时候它叫什么呢?它叫web k-box来这里边有一个pack来杠派,这个时候需要给它设置成center来设置完成之后我们重新打开页面来刷新一下是不是水平居中啊来,那接下来我们说同理操作一下我们的侧轴,那侧轴怎么写呢?原理是一样的,我们说web k和the box,紧接着是我们最终的alone来alone上边呢,我们说同样操作我们最终的center,来实现一下我们最终的元素水平居中,看见效果了吗?实现的效果和我们最终老版本新版本实现的效果是不是一模一样啊?所以呢,接下来我们说上边这三个语句,实现的是我们最终新版。
08:21
本flex实现的元素水平居中,下面这三行语句实现的是老版本实现的flex水平,元素的水平垂直居中。
我来说两句