欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

程序员文章站 2022-07-05 16:45:56
一、viewport视口 1.1什么是屏幕尺寸、屏幕分辨率、屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5、3.7、4.2、4.7、5.0、5.5、6.0等。 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手 ......

一、viewport视口

1.1什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

屏幕尺寸:指屏幕的对角线的长度,单位是英寸常见的屏幕尺寸有3.5、3.7、4.2、4.75.0、5.5、6.0等。

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080。(这里的1像素指的是物理设备的1个像素点)

屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

iphone 3gs和iphone 4对比。屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍。

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

计算像素密度的公式:

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

在早先的移动设备中,屏幕像素密度都比较低,如iphone3分辨率为320x480,在iphone3上,1像素是等于一个屏幕物理像素。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司推出了retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,1像素是等于两个物理像素。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

这是描述物理性质的一个数值,表示计算机屏幕横向有1366个像素发光点,纵向有768个像素点。

像素是构成数码影像的基本单元,通常以像素每英寸ppi为单位来表示影像分辨率大小。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

上网的时候看网页,物理分辨率和网页呈递的效果,息息相关。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

对于同一个网页,不更改字号的情况,分辨率越大,同样字号看着越小。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

把计算机分辨率调大,设为1366*768,此时网页旁边的留白很多。

 

如果这个事,在手机上也是遵循同样的规则,那坏了,手机屏幕的分辨率,惊人的大。

 iphone8的分辨率1334*750

 iphone8 plus分辨率1920*1080

 三星s8的分辨率2960*1440

 小米6的分辨率1920*1080

 

做一个网页,页面上放一个1000px的盒子,放置了h1p,都是默认字号,会发现h1哪像h1啊?

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

写一个测试语句:手机认为自己的屏幕宽度是980px,注意这个数值,不是分辨率。

 document.getelementsbytagname('h2')[0].innerhtml=document.documentelement.clientwidth;

 

现在,这个980是什么?为什么不是手机的分辨率,这是默认视口的宽度

视口(viewport)是手机web制作非常重要的概念,发明人是乔布斯,乔布斯预见到一件事,就是手机的屏幕会越来越清晰,ppi(每平方英寸的像素数,像素密度)会越来越大。此时如果手机按照自己的分辨率去渲染网页,页面上的文字将不可读,20px的文字看不清。所以,手机不能认为自己的宽度是自己的分辨率!乔布斯说,每个手机可以由工程师*的设置“显示分辨率”,起名叫“视口”。也就是说,手机在视口中呈递页面,而不是分辨率的物理窗口。视口中1px等于真实物理的多个px。乔布斯说,默认视口980px,因为980px是实世界上绝大多数网页的版心。此时刚刚好能够卡住它们,像在3000米的高空俯视整个页面。但是,乔布斯还说,前端工程师必须能够自己设置。

 

写一个meta标签:此时手机认为自己的视口是device-width(当前设备)的视口宽度

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width"

initial-scale 设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数

height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用

user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许||ios10 无效

 

此时手机会认为自己的视口是500px宽,称这条语句“约束视口”

 <meta name="viewport" content="width=500px, user-scalable=no, initial-scale=1.0" />

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

此时页面文字变大了。

小米屏幕的物理分辨率横向1080个像素,而现在手机认为自己是500px的宽度,所以一个视口px等于2.16真实px

把所有设备都约束为固定的视口宽度,不合理!比如小米6的分辨率是1080,约束为500iphone8的分辨率750,页面约束为500,此时iphone8的视口分辨率1px等于真实分辨率1.5px,加上iphone8手机本来就小,iphone8中的h1看的感觉要比小米6小,所以iphone8应该认为自己有更小的视口,比如360,可以增加点视口,此时大家的h1不都一样了吗?

 

乔布斯规定,所有的手机出厂的时候,就有一个设备的补偿视口宽度。叫做“出厂视口”,此时这个设备将在出厂的时候写入一个视口宽度,这个宽度下看网页,h1h1感觉一致

出厂视口

品牌

320

iphone4iphone5

360

华为p9,小米56等等

中国国产的手机一律都是360,实际上不合理。

375

iphone6iphone7iphone8

414

iphone6 plusiphone7 plusiphone8 plus

  

完整的meta设置:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

  

视口的值不要背,面试的时候也不用考,因为视口就是为了屏蔽手机和手机的不同而设置的值。视口的值,每个手机不一样,正是因为手机和手机视口值不一样,才让手机看到的14px文字的感觉是一样的。

视口的最终目的:屏蔽手机的尺寸、像素密度差异,让任何手机中的文字看起来一样大。

当你不写meta的时候,此时视口980。写了就是出场视口。就是320360414等等…… 永远都得不到分辨率。


1.2物理像素和设备独立像素

window对象有一个devicepixelratio属性,它可以得到设备物理像素和设备独立像素的比例,也就是 devicepixelratio = 物理像素 / 独立像素

css中的px就可以看作是设备的独立像素,所以通过devicepixelratio可以知道该设备1px代表多少个物理像素。例如,在retina屏的iphone上,devicepixelratio值为2,也就是说1px相当于2个物理像素。

 

iphone6屏幕分辨率是1334*750px,所以系数是2x。那device-width就等于750/2=375px。

iphone6 plus屏幕分辨率是2208*1242px,所以系数是3x。那device-width就等于1242/3=414px。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


二、移动端百分比布局

2.1移动端页面没有版心

手机web页面没有版心,都是撑满的,因为:

1、手机本身就小,如果再留白,寸土寸金的地方就浪费

2、app也是撑满的,用户手机上网的时候,也希望能看到更多的内容,所以撑满。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 

此时没有版心,都是100%,就会给制作带来难度,因为尺寸不能写px单位了,如果版心设置为360px,此时iphone7 plus414视口会看见留白。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 


2.2百分比布局

用百分比布局设置宽度、高度(绝大多数高度可以用px)、paddingmargin的布局。叫做流式布局,页面有弹性,所以也叫弹性布局:

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

 

下面讲解基本功:

<body>

<div></div>  → divbody的亲儿子,60%指的是窗口宽度的60%

</body>

 

<body>

<div> 

<p></p> 60%指的是divwidth60%,无视divpadding

</div>

</body>

 

小题目:

<div>

<p></p>

</div>

div{width:600px;padding-left:100px;}

p{width:50%;}

请问p多宽?此时p应该是300px宽度,因为无视父亲的padding

看看padding,都参考父亲的width。注意,竖直方向上的padding也是看父亲的width,而不是height

 

<div>

<p></p>  → padding-left:10%;指的是父亲的width10%,而不是父亲的padding

                padding-top:10%;指的是父亲的width10%,而不是父亲的height

</div>

 

小题目:

<div>
    <p></p>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}
p{
   width:50%;
   height:100px;
   padding-left:10%;
   paading-right:10%;
   padding-top:10%;
   padding-bottom:10%;
}

请画出p此时的盒模型图。

divpadding是逗你的,因为压根没用,儿子的padding-left如果用百分比写,表示的仍然是父亲的width属性的百分之多少。儿子的padding-toppadding-bottom也是参考父亲的width,所以答案:

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

小题目:

 <div>

     <p></p>

     <p></p>

 </div>

 

div{
    width: 794px;
    height: 200px;
    border: 1px solid #000;
    padding: 124px 34px 34px 23px;
}
p:nth-child(1){
    float: left;
    width: 30%;
    padding: 10% 20% 30%;
    height: 50px;
    background-color: orange;
}
p:nth-child(2){
    float: left;
    width: 30%;
    height: 50px;
    background-color: blue;
}       

请问蓝色盒子和橙色盒子是否能够浮动成功,是否能够并排显示。

答案: 计算1p,总宽度是30% + 20% + 20% = 70%2p总宽度30%,刚好能并排。

 

再来看margin,一律参考父亲width,不参考父亲的marginheight

div{
    width: 200px;
    height: 600px;
    border: 10% solid #000;
}
p{ margin: 10%;}

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

总结:无论marginpaddingwidthheight,无论竖直方向还是水平方向,参考的都是父亲的width

 


2.3 calc()函数

calc()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

 

使用+”、“-”、“*” 和 “/”四则运算;

可以使用百分比、pxemrem等单位;

可以混合使用各种单位进行计算;

表达式中有+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

表达式中有*”和“/”时,其前后可以没有空格,但建议留有空格。

 

border不能用百分比写。所以会带来麻烦:

 border: 10% solid #000;

 

 <div>

     <p>1</p>  float: left;width:50%; border:1px solid red

     <p>2</p>  float: left;width:50%; border:1px solid red

 </div>

 

p就不能浮动成功,因为总宽度已经是100%,又多了4px

 

此时边框不能写成百分百,所以就不好减。

div{
    width: 500px;
    height: 300px;
    background: orange;
}
div p{
    width: 50% /*这里不能轻松减去2px*/
    height: 200px;
    float: left;
    background: green;
    border:1px solid #000;
}

 

但是css3中新增的calc函数能:

div{
    width: 500px;
    height: 300px;
    background: orange;
}
div p{
    width: calc(50% - 2px); /*css3中新增了calc函数*/
    height: 200px;
    float: left;
    background: green;
    border:1px solid #000;
}

 

使用的时候一定要在运算符前后加上空格:

 calc(50%-2px);

正确的应该是:

 calc(50% - 2px);

 

对于兼容性不好的浏览器,要加前缀:

 width:-moz-calc(100% - (10px + 5px) * 2);

 width:-webkit-calc(100% - (10px + 5px) * 2);

 width:calc(100% - (10px + 5px) * 2);

 

兼容性不好,至少安卓4.4还不是特别兼容。

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 


2.4 css3新的盒模型(盒子內减)

之前的盒模型paddingborder、都是外扩的。

css3中新添加一个属性box-sizing:border-box;盒子最终的大小都是以widthheight为准,paddingborder不会影响盒子大小。

 box-sizing:border-box; 盒子內减模式

 

div{
    width: 200px;
    height: 200px;
    padding:10px 20px 30px 40px;
    border:10px solid #ccc;
    background: orange;
}

 

此时真实的面积:280*260

div{
    width: 200px;
    height: 200px;
    padding:10px 20px 30px 40px;
    border:10px solid #ccc;
    background: orange;
    box-sizing:border-box;
}

加上內减属性后,此时paddingborder是內减的,而不是外扩。

小题目:

 <div>

       <p></p>

       <p></p>

 </div>

 

两个p能否并排:

div{
      width: 800px;
      height: 300px;
      border: 1px solid #000;
}
p:nth-child(1){
      float: left;
      width: 500px;
      height: 300px;
      background: blue;
      padding: 21px 33px 44px 11px;
      box-sizing:border-box;  → width:500px涵盖了padding和border了
      border:3px solid red;
      border-right:4px solid black;
}
p:nth-child(2){
      float: left;
      width: 300px;
      height: 300px;
      background: orange;
      padding: 14px 22px 17px 21px;
      box-sizing:border-box; → width:300px涵盖了padding和border了
      border:5px solid red;
      border-right:4px solid black;
}     

 

小案例:响应布局

div{
      width:80%;
      height:100px;
      margin:0 auto;
      background-color:#111;
      padding:10px;
      padding-right:0px;
    }
div p{
      float: left;
      width:33.3333333%;
      height:100px;
      background-color:deeppink;
      border-right:10px solid #111;
      box-sizing:border-box;
    }

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 

小题目:div里面一个p

div{
   width:600px;
   height: 200px;
   padding:50px;
   box-sizing:border-box;
}
p{width:50%;height: 200px;}

p的宽度是250px因为父亲有box-sizing:border-box;属性,內减了padding:50px,儿子参考的是父亲真实能用的面积的百分比(500px).

 


2.5最大和最小限定

 width:80%;

 max-width:800px; /*限定最大缩放宽度为800*/

 min-width:400px; /*限定最小缩放宽度为400*/

超过这个范围,百分百就不再缩放了。


2.6固比固

思考一个案例:有三个盒子并排撑满父亲,两边的盒子固定120px,中间的盒子撑满剩余部分。

难点就是中间的盒子百分百,写啥都不对,因为它不知道去掉240px之后,占父亲多少百分比。

 width:calc(100% - 240px);

 


三、高度的等比变化

难度主要在参考值不统一,width参考是父亲的widthheight参考父亲的height

3.1插入图片法

一般来说,需要高度等比例变化的盒子,都是携带图片的,因为不希望图片变形,所以盒子要等比例变化。

img标签天生具有等比例的性质盒子约束图片的宽度,图片反着影响盒子的高度。

比如现在要制作三个1:1:1的盒子并排,并且他们的宽高比都是1:1,也就是正方形。

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

<div>  → width:80%; overflow:hidden; padding-left:5px;
         <p>  → float:left;width:33.33%;border-right: 5px
             <img src="images/yangyang.png" > → width:100%;height:auto; 
         </p>
         <p> → float:left;width:33.33%;border-right: 5px
             <img src="images/liyifeng.png"> → width:100%;height:auto;
         </p>
         <p>  → float:left;width:33.33%;border-right: 5px
             <img src="images/xiaoming.png"> → width:100%;height:auto;
         </p>
 </div>
div{
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    overflow: hidden;
    padding-left: 6px;
    box-sizing:border-box;
}
div p{
    float: left;
    width: 33.3333%;
    border-right: 6px solid white;
    box-sizing:border-box;
}
div p img{
    width: 100%;
    height: auto;
}

现在升级:

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

div p:nth-child(1){
    width: 66.666%;
    border-right: 1px solid black;
}
div p:nth-child(2){
    width: 33.333%;
    border-bottom: 1px solid black;
}
div p:nth-child(3){
    width: 33.333%;
}

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

图片撑高了盒子,盒子本身没有高度,盒子的高度相当于是图片的高度加1px边框,即使写了border-box也没用也是图片的高度加1px边框。

 


3.2 padding法将图片放在padding里面

竖直方向的padding参考的是父亲的widthpadding的参考和width的参考统一了,所以就能够制作高度等比例变化的盒子了!

盒子的高度是0,全靠padding来撑!

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

比如制作三个并排,每个盒子宽高比1:1的盒子此时:

 float: left;

 width: 33.333%;

 height: 0px;

 padding-top: 33.333%;

 

比如制作五个并排,每个盒子宽高比2:1的盒子此时

 float: left;

 width: 20%;

 padding-top: 10%;

 height: 0px;

 

padding法也可以插img,但是img要在height0的容器中,所以img必须绝对定位,飘在父亲的padding中。

div p{
    float: left;
    width: 33.333%;
    padding-top: 33.333%;
    height: 0px;
    border-right: 1px solid #000;
    box-sizing:border-box;
    position: relative;
}
div p img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

升级:

div{
    width: 80%;
    overflow: hidden;
    border: 1px solid #000;
    margin:10px auto;
}
div p:nth-of-type(1){
    width: 66.666%;
    padding-top: calc(66.6666% + 10px);
    border-right:5px solid #000;
}
div p:nth-of-type(2){ border-bottom:10px solid #000;}
div p{
    float: left;
    height:0;
    width: 33.333%;
    padding-top:33.3333%;
    box-sizing:border-box;
    position: relative;
}
div p img{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

四、css3弹性盒模型

4.1弹性盒布局属性display:box;display:flex;

注意:设为flex布局后,子元素的floatclearvertical-align属性将失效。

 

需求:让三个盒子并排,撑满父亲,而且它们的宽度是1:2:3,此时一个专门设置width

解:总份数1+2+3等于6,所以一份就是100/6 = 16.6666%,所以应该:16.6666%33.3333%50%

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

再来一个盒子,四个盒子并排撑满父亲,比例是:1:2:6:3

解:总份数是12,是一样一份是8.333333333333334.答案:8.3333%16.66%50%25%

 

css3中新推出一个属性,弹性盒容器:

 display:box;

 display:-webkit-box;

 

<div>  → display:-webkit-box;  此时这个div就是弹性盒容器,里面的亲儿子自动浮动
    <p>1</p>  → -webkit-box-flex:1;  占1份
    <p>2</p>  → -webkit-box-flex:2;  占2份
    <p>3</p>  → -webkit-box-flex:6;  占6份
    <p>4</p>  → -webkit-box-flex:3;  占3份
</div>

注意:当div设置display:box;的时候,儿子自动会并排,儿子不要写浮动,写了反而出错。

浏览器会自动检测总份数,每个份数占多少百分比,不用计算百分比是多少,这个属性能颠覆百分比的写法。

css中从此可以不写百分比,并且这个属性足够鲁棒,marginpaddingborder也能自动减去。

但是这个属性兼容性不好,因为是新出的属性,安卓4.4才开始兼容。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

实际上这个属性还要一个分支,就是display:flex;

要加前缀:这个属性的哲学就是可以*的设置元素在容器中的排列形式。

 

 display:flex;

 display:-webkit-flex;

 

兼容写法:

 display:box;

 display:-webkit-box;

 display:flex;

 display:-webkit-flex;

 

基本使用:

<div>  → display:flex;
        <p>a</p> → flex:1; 不要写浮动!!
        <p>b</p> → flex:2; 不要写浮动!!
        <p>c</p> → flex:2; 不要写浮动!!
        <p>d</p> → flex:1; 不要写浮动!!
</div>

4.2父级容器属性

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

flex-direction属性

该属性可以设置方向(即子项目的排列方向)。

 .box {

   flex-direction: row | row-reverse | column | column-reverse;

 }

 

1 row(默认值):主轴为水平方向,起点在左端。

2 row-reverse:主轴为水平方向,起点在右端。

3 column:主轴为垂直方向,起点在上沿向下。

4 column-reverse:主轴为垂直方向,起点在下沿向上。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

div{
     width: 800px;
     height: 400px;
     margin:10px auto;
     border: 1px solid #000;
     display:flex;
     flex-direction:row-reverse;
 }

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

flex-wrap属性

默认情况,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 .box{

   flex-wrap: nowrap | wrap | wrap-reverse;

 }

 

1 nowrap(默认):不换行。

2 wrap:换行,第一行在上方。

3 wrap-reverse:换行,第一行在下方。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

 .box {

   flex-flow: <flex-direction> || <flex-wrap>;

 }

 

 flex-flow:row-reverse wrap;

 


 

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式

 .box {

   justify-content: flex-start | flex-end | center | space-between | space-around;

 }

 

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

 

1 flex-start(默认值):左对齐

2 flex-end:右对齐

3 center: 居中

4 space-between:两端对齐,项目之间的间隔都相等。

5 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

 .box {

   align-items: flex-start | flex-end | center | baseline | stretch;

 }

 

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

1 flex-start:交叉轴的起点对齐。

2 flex-end:交叉轴的终点对齐。

3 center:交叉轴的中点对齐。

4 baseline: 项目的第一行文字的基线对齐。

5 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

 .box {

   align-content: flex-start | flex-end | center | space-between | space-around | stretch;

 }

 

1 flex-start:与交叉轴的起点对齐。

2 flex-end:与交叉轴的终点对齐。

3 center:与交叉轴的中点对齐。

4 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

5 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

6 stretch(默认值):轴线占满整个交叉轴。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

4.3子级项目属性

order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

 .item { order:1; }

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage


 

flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性为1,则它们将等分剩余空间(如果有的话)。

如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

 前端笔记知识点整合之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

 .item {

   flex-grow: <number>; /* default 0 */

 }

 


 

flex-shrink属性

flex-shrink