作业:
1. 将课堂中的全部案例照写一遍, 并达到默写级别
(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)
css:
.demo1 > .item { flex-grow: 0; }
效果:
(2): 将全部剩余空间分配给指定弹性元素,例如: 第三个
css:
.demo2>.item:last-of-type { flex-grow: 1; }
效果:
(3): 全部剩余空间按增长因子在不同弹性元素间分配
css:
/*第一个元素*/ .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; }
效果:
(4): 增长因子支持小数, 因为是按增长比例分配
css:
/*第一个元素*/ .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; }
效果:
(5): 每个弹性元素宽度不同时, 同样适用以上分配规律
css:
/*每个元素的宽度不一样,?*/ .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; }
效果:
(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0
css:
/* 所有元素不缩减,以原始宽度显示 设置缩减因为为: 0 */ .demo1 > .item { flex-shrink: 0; }
效果:
(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)
css:
/*所有元素自动缩放适应容器宽度且不换行显示设置缩减因子: 1 (默认值/初始值)*/ .demo2 > .item { flex-shrink: 1 }
效果:
(3): 当三个弹性元素的缩减因为子不相等时
css:
实例
/*当三个元素的缩减因为子不相等时*/ .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; }
效果:
(4): 缩减因子也可以是小数,只要大于就可以
css:
实例
/*缩减因子也可以是小数,只要大于就可以了, 负数无效*/ .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; }
效果:
(5): 当每个弹性元素宽度不一样时,
CSS:
实例
/* 特别提示: 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; }
效果:
手抄:
2. 将flex属性的用法, 手抄, 建议二遍以上
3. 自学:align-self, order的用法
align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。注意:align-self 属性可重写灵活容器的 align-items 属性。
order 属性 设置或检索弹性盒模型对象的子元素出现的順序。注意:如果元素不是弹性盒对象的元素,则 order 属性不起作用
实例
@import url("public.css"); .container { width: 550px; height: 300px; /*以主轴垂直为例进行演示 垂直且不换行*/ flex-flow: column nowrap; /*默认元素紧贴终止线排列*/ align-items: flex-end; } .item { width: 100px; height: 60px; } /*将第一个单独调整, 紧贴起始线排列*/ .item:first-of-type { /*重新排序,3*/ order:3; align-self: flex-start; } /*将最后一个单独调整到中间位置排列*/ .item:last-of-type { /*重新排序,2*/ order:2; align-self: center; } /*将第二个元素,使它自动扩展*/ .item:nth-last-of-type(2) { /*设置不一定背景方便观察*/ background-color: #fff; /*为了自动扩展,需要还原元素的宽度到初始大小*/ width: auto; align-self: stretch; /*重新排序,1*/ order:1; }
效果:
4. 试着将之前的一些案例用flex布局改定, 例如圣杯布局
css:
实例
* { margin: 0; padding: 0; } /* 将整个页面设置为弹性盒 */ html, body { height: 100%; overflow: hidden;/*内容溢出会被修剪,并且其余内容是不可见的*/ display: flex; /* 改变主轴的排列方式 */ flex-direction: column; /* 将主轴上的排列规则改为两端分布 */ justify-content: space-between; text-align: center; font-size: 25px; } /* 设置头部和尾部的颜色 */ .footer, .header { height: 80px; background: #ccc; text-align: center; line-height: 80px; font-size: 30px; } /* 设置中间内容区域样式 */ .center { /*可增长*/ flex: 1; background: #ccc; display: flex; } /* 设置左边div和右边div */ .center>.left,.center>.right { width: 200px; height: 100%; background: yellow; } /* 设置中间内容 */ .center>.content { /*可增长*/ flex: 1; background: pink; }
HTML代码
实例
<!-- 界面结构区域 --> <div class="header">header</div> <div class="center"> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> </div> <div class="footer">footer</div>
效果图:
5. 试着自己先模仿一些现成网站首页或某个页面(选做)
总结:
1,增长因子: flex-grow:元素和容器都自定义宽度,还需要有剩余空间,且不能设置换行,设置0为默认值,所有元素自适应容器宽度且不换行,当增长因子不相等时,一样能自适应增长,根据增长比例大小,增长的像素也不同。每个元素宽度相等时,增长因子除以增长因子之和然后除以元素的像素,就能知道每个元素需要增长多少像素。当每个元素的宽度不相等时,以上公式一样能用。
2,缩减因子:flex-shrink:设置0为不自动缩减,设置1自动缩减,所有元素自适应容器宽度且不换行,也是默认值。当缩减因子不相等时,一样能自适应缩减,根据缩减比例大小,缩减的像素也不同。每个元素宽度相等时,可以直接除以缩减比列,然后乘以每个元素的宽度,就能知道每个元素需要缩减多少像素。
注意:当每个元素的宽度不相等时,多了一步获得它的微调比列,然后每个元素宽度乘以缩减比列乘以微调比列的积,就能得出每个元素宽度需要缩减多少像素。
弹性元素的基准尺寸:flex-basis ,属性定义在分配多余空间之前, 用在没有为弹性元素设置宽度,或设置了不满足需求,可以为每一个弹性元素设置一个初始值, 如果设置元素宽度和设置了元素的基准,就以设置的基准大小显示。还可以通过flex-basis:设置元素的百分比显示。
简化设置:
flex: 如果有多个值,则按以下顺序:flex: flex-grow flex-shrink flex-basis,默认状态: flex: 0 1 auto;含义: 不增长, 可缩减, 宽度自动