Blogger Information
Blog 37
fans 0
comment 0
visits 21225
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端第七课:弹性布局之弹性元素-PHP培训九期线上班
渡劫小能手
Original
390 people have browsed it

一、将课堂中的全部案例照写一遍, 并达到默写级别

demo1


实例

@import "public.css";

/*
增长因子使用场景:
1. 弹性元素设置了自定义宽度
2. 弹性容器设置了自定义宽度
3. 弹性元素总宽度在主轴上小于弹性容器的宽度,出现了多余空间
4. 弹性容器不允许换行
*/

.container {
    width: 550px;
}
.item {
    /*基本宽度*/
    width: 100px;
}

/*增长因子默认值*/
.demo1 > .item {
    flex-grow: 0;
}

/****************************************/

/*将剩余空间全部分配给最后一个元素*/
/*第一个与第二个增长量属性可以省略*/
.demo2 > .item:first-of-type {
    flex-grow: 0;
}
.demo2 > .item:nth-of-type(2) {
    flex-grow: 0;
}
.demo2 > .item:last-of-type {
    flex-grow: 1;
}

/*550-300 = 250, 250是可分配的多余空间*/
/*第一个,第二个增长因子为0,所以全部分配给第三个*/
/*最后一个元素此时宽度: 100 + 250 =  350px*/

/*****************************************/

.demo3 > .item:first-of-type {
    flex-grow: 1;
}
.demo3 > .item:nth-of-type(2) {
    flex-grow: 1;
}
.demo3 > .item:last-of-type {
    flex-grow: 3;
}
/*
计算步骤:
1. 获取基本变量
  1.1 可分配空间: 550px - (100px + 100px +100px) = 250px
  1.2 增长因子: 第一个: 1, 第二个: 1, 第三个: 3
  1.3 增长因子之和: 1 + 1 + 3 = 5

2. 计算增长比例
  2.1 计算公式: 增长比例 = 增长因子 / 增长因子之和
  2.2 第一个元素增长比例: 1 / 5 = 0.2
  2.3 第二个元素增长比例: 1 / 5 = 0.2
  2.4 第三个元素增长比例: 3 / 5 = 0.6

3. 计算每个元素的增长量
  3.1 第一个元素增长量: 250px * 0.2 = 50px
  3.2 第二个元素增长量: 250px * 0.2 = 50px
  3.3 第三个元素增长量: 250px * 0.6 = 150px

4. 计算每个元素最终宽度
  4.1 第一个元素: 100px + 50px = 150px
  4.1 第二个元素: 100px + 50px = 150px
  4.1 第三个元素: 100px + 150px = 250px
 */

/*经过以上分析可知, 增长比例是一个相对数,与增长因子是否是整数无关*/
/*下面的flex-grow设置参数与上面的显示结果完全一致*/
.demo4 > .item:first-of-type {
    flex-grow: 0.5;
}
.demo4 > .item:nth-of-type(2) {
    flex-grow: 0.5;
}
.demo4 > .item:last-of-type {
    flex-grow: 1.5;
}


/*如果每个元素的宽度不一样, 是否适用以上计算公式呢?*/
.demo5 > .item:first-of-type {
    width: 120px;
    flex-grow: 2;
}

.demo5 > .item:nth-of-type(2) {
    width: 150px;
    flex-grow: 2;
}
.demo5 > .item:last-of-type {
    width: 180px;
    flex-grow: 6;
}

/*
计算过程:
三个元素总宽度: 120px+150px+180px=450px
剩余空间: 550px - 450px = 100px
增长因子之和: 2 + 2 +6 = 10
每个元素的增长比例依次为: 2/10, 2/10, 6/10, 即: 0.2,0.2, 0.6
生个元素的增长量依次为: 100px* 0.2 = 20px, 100px*0.2=20px, 100px*0.6=60px
每个元素的最终宽度: 120px+20px=140px, 150px+20px=170px, 180px+60px=240px
 */

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-12_222117.jpg

2019-11-12_222201.jpg

 

2019-11-12_222217.jpg

demo2


实例

@import "public.css";

/*
缩减因子使用场景:
1. 弹性元素设置了自定义宽度
2. 弹性容器设置了自定义宽度
3. 弹性元素总宽度在主轴上超过了弹性容器的宽度
4. 弹性容器不允许换行
*/

.container {
    width: 550px;
}
.item {
    /*基本宽度*/
    width: 250px;
}

/*
所有元素不缩减,以原始宽度显示
设置缩减因为为: 0
*/
.demo1 > .item {
    flex-shrink: 0;
}


/*
所有元素自动缩放适应容器宽度且不换行显示
设置缩减因子: 1 (默认值/初始值)
*/
.demo2 > .item {
    flex-shrink: 1;
}

/*
计算步骤:
1. 获取基本变量
  1.1 多余待缩放空间: (250px + 250px +250px) - 550px = 200px
  1.2 缩减因子: 第一个: 1, 第二个: 1, 第三个: 1
  1.3 增长因子之和: 1 + 1 + 1 = 3

2. 计算缩减比例
  2.1 计算公式: 缩减比例 = 缩减因子 / 缩减因子之和
  2.2 第一个元素缩减比例: 1 / 3 = 0.3333
  2.3 第二个元素缩减比例: 1 / 3 = 0.3333
  2.4 第三个元素缩减比例: 1 / 3 = 0.3333

3. 计算每个元素的缩减
  3.1 第一个元素缩减: 200px * 0.3333 = 66.666px
  3.2 第二个元素缩减: 200px * 0.3333 = 66.666px
  3.3 第三个元素缩减: 200px * 0.3333 = 66.666px

4. 计算每个元素最终宽度
  4.1 第一个元素: 250px - 66.66px = 183.33px
  4.1 第二个元素: 250px - 66.66px = 183.33px
  4.1 第三个元素: 250px - 66.66px = 183.33px
 */

/*经过以上分析可知, 缩减比例是一个相对数,与缩减因子是否是整数无关*/

/****************************************/

/*当三个元素的缩减因为子不相等时*/

.demo3 > .item:first-of-type {
    flex-shrink: 1;
}
.demo3 > .item:nth-of-type(2) {
    flex-shrink: 2;
}
.demo3 > .item:last-of-type {
    flex-shrink: 3;
}
/*
缩减因子之和: 1 + 2 + 3 = 6
每个元素的缩减比例依次为: 1/6, 2/6, 3/6, 即: 0.1667, 0.3333, 0.5
每个元素的缩减量依次为: 200*0.1667 = 33.34px, 66.666px, 100px
每个元素的最终宽度依次为: 250-33.34=216.66px, 183.33px, 150px
 */

/***************************************/

/*缩减因子也可以是小数,只要大于就可以了, 负数无效*/

.demo4 > .item:first-of-type {
    flex-shrink: 0.2;
}
.demo4 > .item:nth-of-type(2) {
    flex-shrink: 0.3;
}
.demo4 > .item:last-of-type {
    flex-shrink: 0.5;
}

/*
缩减因子之和: 0.2 + 0.3 + 0.5 = 1
每个元素的缩减比例依次为: 0.2, 0.3, 0.5
每个元素的缩减量依次为: 200*0.2 = 40px, 200*0.3=60px, 200*0.5=100px
每个元素的最终宽度依次为: 250-40=210px, 190px, 150px
 */


/*如果每个元素的宽度不一样, 是否适用以上计算公式呢?*/

/*
特别提示:
  1. 缩减因子的前掉是每个元素必须是等宽的(在主轴上空间相等)
  2. 如果不相等, 必须按一定的比例, 来调整这个元素的缩减因子
*/
.demo5 > .item:first-of-type {
    width: 220px;
    flex-shrink: 2;
}

.demo5 > .item:nth-of-type(2) {
    width: 250px;
    flex-shrink: 2;
}
.demo5 > .item:last-of-type {
    width: 280px;
    flex-shrink: 6;
}

/*
元素总宽度: 220 + 280 + 250 = 750
容器宽度550, 于是有200px的等缩减空间, 需要在每个元素中进行摊派

1. 计算缩减因子的的缩小比例: 等待缩减空间 / 每个弹性元素的宽度与缩减因子乘积的总和

缩减因子的缩小比例: 200 / (220 * 2) + (250 * 2) + (280 *6) = 200 / 2620 = 0.07633588


2. 计算每个元素的缩减量: 元素宽度 * ( 缩减因子 * 缩减因子的缩减比例)

第一个元素: 220 * ( 2 * 0.07633588) = 33.5877 px
第二个元素: 250 * ( 2 * 0.07633588) = 38.1679 px
第三个元素: 280 * ( 6 * 0.07633588) = 128.2442 px

3. 计算每个元素最终宽度

第一个元素: 220 - 33.5877 = 186.4123 px
第二个元素: 250 - 38.1679 = 211.8321 px
第三个元素: 280 - 128.2442 = 151.7558 px
 */

/*你可能在不同的浏览器, 看到具体宽度会有点误差(约1px),这是正常的,因为本身就是近似值,浏览器的解析也不相同*/

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-12_222319.jpg

2019-11-12_222350.jpg

2019-11-12_222358.jpg

demo3


实例

@import "public.css";

/*
元素基准使用场景:
flex-basis 属性定义了在分配多余空间之前,
项目占据的主轴空间(main size),
浏览器根据这个属性,计算主轴是否有多余空间

1. 没有为弹性元素设置宽度
2. 为元素设置的宽度不满足当前需求
3.为每个弹性元素设置初始值/状态
*/

.container {
    width: 550px;
}

/*在未设置元素宽度时,以内容宽度显示*/
.demo1 > .item {
    flex-basis: content;
}

/*存在自定义元素宽度时,则以该宽度显示*/
.demo2 > .item {
    width: 100px;
}

/*自动状态下, 将设置权限交给浏览器*/
/*如果元素设置了宽度, 就按自定义宽度显示*/
/*如果元素的宽度也是auto,或者没有定义, 就按内容宽度content显示*/
.demo3 > .item {
    flex-basis: auto;
}

/*当元素存在自定义宽度和flex-basic基准宽度时,以哪个为准呢?*/
/*以flex-basic属性值为弹性元素的基准值*/
.demo4 > .item {
    width: 100px;
    flex-basis: 150px;
}


/*元素基准宽度支持百分比*/
.demo5 > :first-child {
    flex-basis: 20%;
}

.demo5 > :nth-child(2) {
    flex-basis: 30%;
}

.demo5 > :last-child {
    flex-basis: 50%;
}

/*
每个元素的宽度如下:
第一个: 550px * 20% = 110px
第二个: 550px * 30% = 160px
第一个: 550px * 50% = 275px
 */

/*注: 如何三个元素百分比之间不等于100%,则会出现多余空间, 可以按之前方案进行更分配*/

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-12_222433.jpg

2019-11-12_222535.jpg

demo4


实例

@import "public.css";

.container {
    width: 550px;
}
/*
flex: 如果有多个值,则按以下顺序:
flex: flex-grow flex-shrink flex-basis
所以, flex是以上三个属性的缩写, 以后大家尽可能只用它,而不单独使用以上三个属性
默认状态: flex: 0 1 auto;
含义: 不增长, 可缩减, 宽度自动
*/


/*根据width,height计算,并且允许缩减大小适应容器*/
.demo1 > .item {
    width: 100px;
    height: 60px;
    flex: initial;

    /*等价于初始值*/
    flex: 0 1 auto;
}


.demo2 > .item {
    width: 100px;
    height: 60px;
    flex: auto;

    /*等价于*/
    /*flex: 1 1 auto;*/
}

.demo3 > .item {
    width: 100px;
    height: 60px;
    flex: none;

    /*等价于: */
    flex: 0 0 auto;
}

/*一个数值代表增长因子*/
.demo4 > .item {
    width: 100px;
    height: 60px;
    flex: 1;
    /*等价于*/
    /*如果有多余空间,允许元素在主轴上伸缩*/
    /*flex-grow: 1;*/

    /*等价于:*/
    /*flex: 1 1 auto;*/
}



/*下面做个小案例: flex: 1 0 200px;这是什么意思?*/
/*意思是: 可增长, 不可缩减, 元素宽度计算基准为200px*/
/*为什么会超出,因为不增长, 且容器只有550px,而三个元素总长度达到600px*/
.demo5 > .item {
    width: 100px;
    height: 60px;
    flex: 1 0 200px;
}

.demo6 > .item {
    width: 100px;
    height: 60px;
}

.demo6 > .item:first-of-type {
    flex: 1 1 50%;
}
/*
实际上最后一个参数: 30%是无效的, 任何数都不会发生变化
因为第一个是1,表示可增长, 即将剩余空间全部分配给它,其它二个默认增长因子为0
*/

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-12_222636.jpg


2019-11-12_222547.jpg

demo5


实例

@import "public.css";

.container {
    width: 500px;
    height: 300px;

    /*以主轴垂直为例进行演示*/
    flex-flow: column nowrap;

    /*默认元素紧贴终止线排列*/
    align-items: flex-end;
}

/*设置元素的默认大小*/
.item {
    width: 100px;
    height: 60px;
}


/*将最后一个单独调整, 紧贴起始线排列*/
.item:last-of-type {
    align-self: flex-start;
}

/*将第一个单独调整到中间位置排列*/
.item:first-of-type {
    align-self: center;
}

/*!*将第二个元素,使它自动扩展*!*/
.item:nth-last-of-type(2) {
    /*设置不一定背景方便观察*/
    background-color: #fff;
    /*为了自动扩展,需要还原元素的宽度到初始大小*/
    width: auto;

    align-self: stretch;
}

/*这个属性很实用, 例如我们经常会将导航上用户登录/注册按钮单独放在右侧,就可以用到它*/

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-12_223049.jpg

2019-11-12_223057.jpg

二、试着将之前的一些案例用flex布局改定, 例如圣杯布局


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header ,footer{
            height: 60px;
            background-color: lightslategrey;
            line-height: 60px;
            text-align: center;
        }
        main {
            box-sizing: border-box;
            border: 2px solid red;
            display: flex;
        }
        main > article {
            box-sizing: border-box;
            border: 1px solid yellow;
            height: 600px;
            width: 70%;
            background-color: lime;
            order: 2;
        }
        main >aside:first-of-type {
            box-sizing: border-box;
            order: 1;
            flex: auto;
            background-color: lightpink;
        }
        main >aside:last-of-type {
            box-sizing: border-box;
            flex: auto;
            background-color: lightpink;
            order: 3;
        }
    </style>
</head>
<body>
<header>头部</header>
<main>
    <article>内容</article>
    <aside>左边</aside>
    <aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



2019-11-12_223519.jpg

2019-11-12_223816.jpg

2019-11-12_223827.jpg

三、总结

学习了flex: flex-grow flex-shrink flex-basis,单独设置垂直轴元素的位置align-self:flex-start flex-end center,使用order进行位置调整。

Correction status:qualified

Teacher's comments:弹性的属性并不多, 也不难记, 掌握 好了, 对于后面的栅格学习有帮助
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post