柚媚网络营销培训

柚媚网络营销培训



百度智能小程序开发教程(1):弹性页面布局


作者:本站 日期:2018-10-02 05:59:50

我小时候有一个梦想,天有多高我就有多高,2009年,W3C帮我实现了,那一年,他们搞了一个Flexible Box,弹性布局的意思,缩写为Flex。我们在设计网页的时候,有一个盒子的概念,这个盒子有上下左右四个边要指定,网页里面的内容也是一个一个的盒子,你要么用相对值来指定,要么用绝对值来指定,而在写代码的时候也特别头疼,这个弹性布局就减少了这个痛苦,更主要的是用来开发移动网页非常方便,因为生产移动设备那几爷子谁也不服谁,大小长短各整各的!我们的百度智能小程序课程首先就讲一下这个。

看一下指定长宽的盒子,和弹性布局的盒子的显示效果。

  

 

对照下面的图熟悉几个概念,不必刻意去记忆,后面会一个一个讲,多练习练习什么都记住了!

1flex container:称为Flex容器,简称"容器",指采用Flex布局的元素;

2flex item:称为Flex项目,简称"项目",就是容器内的所有子元素,它自动成为该容器的成员;

3main axis:容器主轴;

4cross axis:容器交叉轴;

5main start:主轴的开始位置(与边框的交叉点);

6main end:主轴的结束位置;

7cross start:交叉轴的开始位置叫做;

8cross end:交叉轴的结束位置叫做;

9main size:单个项目占据的主轴空间;

10cross size:单个项目占据的交叉轴空间。

直接抄袭一张图片直观说明,虎雕美工太臭了,没有办法啊!


 


 

不要以为我眼睛花了,把一张图片翻来覆去地贴上来,我就是想告诉你,main start是可以从上下左右开始滴!然后main endcross startcross end自动跟上。

别转了,让我来告诉你这是怎么确定的。

容器属性flex-direction,官方解释是容器内项目排列的方向,按这个说法等会儿你肯定蒙圈!柚媚网络营销培训用人话告诉你:容器内的项目从哪里开始,向哪个方向结束。因为main startmain endcross startcrossend不是你所想象的等同于左右上下,而是由这个flex-direction决定的!如果这个没有确定,就像分别站在十字路口的四个人,如果全部面向十字路口,我喊向左转,四个人会向东南西北四个方向转!

如果我先让大家统一面向北方,现在叫大家向左转,全部都会转向东方了。flex-direction属性为水平方向的row时,main startmain end是从左到右,也就是我们上面那张图,但是,如果属性为水平方向的row-reverse时,main startmain end是从右到左!就像我们读书时上体育课站队一样,东南西北都可能是左边!我们把这四个属性简述一下就是rowmain star 在左边,row-reversemain star 在右边, columnmain star 在上边,column-reversemain star 在下边,其它三个大家自己转动上面那个图片理解。


容器属性flex-wrap指定容器内项目换行方式。Nowrap为不换行,当项目不足以排满空间时,会有多余的空间空出来,项目按指定的空间分配。当项目占用的空间超过容器,以一个字节的单位为最小单位,如果项目最小单位占用的空间总数并没有超过,项目的宽度会在容器内自动调整,按各个项目最小单位数比例分配空间给每个项目,如果项目最小单位总数占用的空间超过了容器,项目就会撑破容器; wrap为允许换行,从main start开始,靠cross startwrap-reverse也是允许换行,从main start开始,cross end

justify-content属性确定项目在主轴上的对齐方式。先假设flex-direction属性为水平方向的row,用Word来说明大家更容易懂,把容器看着是一张纸,项目是上面的文字,flex-start是左对齐, flex-end右对齐, center居中对齐, space-between是两边对齐,space-around,这个近似于space-between,但是首尾的项目不是完全靠边的,比如3个每个是60px的项目,现在有300px的空间,先减去180px,余下120px,那么边距是20px,中间的间隔是40px。而在space-between中,没有边距,中间间隔是60px。两者的对比图如下:


容器的align-items属性:定义在交叉轴上的对齐方式,有flex-startflex-endcenterbaselinestretch共五种情况,前面三种同justify-content三种同名属性是同一个意思,很好理解,主要是baselinestretch要难一点。前者是项目靠cross start以第一个项目字体的基线为准进行对齐,后者是在项目未指定高度或者高度定义为auto时,把下面拉伸填满从cross startcross end之间的空间。而center属性是各项目在交叉轴中点以项目中点进行对齐。

 

align-content属性用于当有多根主轴时,即item不止一行时,定义多行在交叉轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效,该属性需要先设置flex-wrap属性为可转行。align-contentflex-start:居cross start对齐、flex-end:居cross end对齐、center:居交叉轴中点对齐、space-between:居交叉轴两端对齐、space-around:沿交叉轴轴线均匀分布、stretch:各行将根据其flex-grow值伸展以充分占据剩余空间。

这个属性不坑爹,很多人的解释坑爹!直白地说,就是针对整个项目在这个块来操作的!stretch是拉伸已经转行的各行所有项目的值来填满交叉轴,其它是把小项目的值拉伸到最大项目的值进行转行,但不一定填满交叉轴。但是,当容器的交叉轴没有指定值或者是auto,则stretch是把小项目的值拉伸到最大项目的值进行转行,其它则会把空间填满。如果最后一个项目是最小值而且单独成一行,则会保留该值,有多个项目时,按最大值进行拉伸,不一定拉伸到所有项目的最大值。

 

 

以上是关于容器的六个属性,用flex-direction确定容器内项目的开始结束方向,flex-wrap确定换行与否与换行方式,flex-flow是前两种方式的简写形式,默认默认row nowrap justify-contentalign-item是控制项目在主轴和交叉轴上的对齐方式的,而 align-content是把容器内的项目作为块来控制其在交叉轴上的对齐方式的。

每个项目内部的属性也有六个:

1order控制项目的排列顺序,数值越小,排列越靠前,默认为0。这是因为项目默认是按在HTML语言或者小程序swan语言文件中书写的先后顺序依次排列的,如果我们想用样式表控制其顺序,比如控制所有id的大师兄、二师兄、三师兄、四师兄都按顺序排列,就可以这样写:

#dashixiong   {order: 1;}

#ershixiong  {order: 2;}

#sanshixiong {order: 3;}

#sishixiong  {order: 4;}

2flex-grow控制容器内项目的放大比例,默认值是0,不放大。

3flex-shrink则是控制容器内项目的缩小比例,默认为1,就是如果空间不足了,该项目将缩小。

4flex-basis在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。什么意思呢?就是指定某个元素占据的主轴空间的大小,可以是绝对值,也可以是百分比。如:

.dashixiong { flex-basis: 180px;}

.ershixiong { flex-basis: 20%;}

5flexflex-grow, flex-shrink flex-basis的简写形式,默认值为0 1 auto。后两个属性可有可无。

6align-self改变单个项目在align-items指定的属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

如果我这个大师兄哪一天想脱离组织柚媚网络营销培训了,回花果山去快活,我肯定不会按原来的方式对齐哈!看一下效果,再放智能小程序教程源码。

 

 

先建一个xyj.css

.page1{

   background-color: #999999;

    width: 100%;

    height: 100%;

}

.box11{

display: -webkit-flex;

    display: flex;

   height:220px;

   background-color: green;

   align-items: flex-start;

}

.item05{

    width: 60px;

    background: red;

    border: 1px solid #ccc;

    font-size: 15px;

    line-height: 15px;

    color:#fff;

   }

.item06{

    width: 60px;

    background: red;

    border: 1px solid #ccc;

    font-size: 25px;

    line-height: 25px;

    color:#fff;

   }

.item07{

    width: 60px;

    background: red;

    border: 1px solid #ccc;

    font-size: 20px;

    line-height: 20px;

    color:#fff;

   }

再写一个xyj.swan

  

       师傅在这里

       我是孙悟空

       我是二师兄

       三师兄告诉你别相信上面两个是坑货

 

    组织上原来是这样安排的。

    

       师傅在这里

        我是孙悟空

        我是二师兄

        三师兄告诉你别相信上面两个是坑货

       我们是花果山九千万万的猴子猴孙们

   

    回到花果山了,我的地盘我做主。

 

 



评论列表:
发表评论:

昵 称:

内 容: