将课堂中的全部案例照写一遍, 并达到默写级别
实例
html>
设置弹性元素的增长因子div {
width: 500px;
border: 1px solid black;
margin: 10px;
}
.item {
box-sizing: border-box;
background-color: lightseagreen;
border: 1px solid red;
padding: 15px;
}
.flex {
display: flex;
}
.demo01 {
flex-grow: 0;
}
.demo02 > .item:first-of-type {
flex-grow: 1;
}
.demo03 > .item:first-of-type {
flex-grow: 1;
}
.demo03 > .item:nth-child(2) {
flex-grow: 1;
}
.demo03 > .item:nth-child(3) {
flex-grow: 1;
}
flex-grow: 设置弹性元素增长因子
(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)
item1
item2
item3
(2): 将全部剩余空间分配给指定弹性元素,例如: 第1个
item1
item2
item3
(3): 全部剩余空间按增长因子在不同弹性元素间分配
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
html>
设置弹性元素的缩减因子div {
width: 500px;
border: 1px solid black;
margin: 10px;
}
.item {
box-sizing: border-box;
width: 200px;
border: 1px solid red;
background-color: lightcoral;
padding: 15px;
}
.flex {
display: flex;
}
.demo01 >.item {
flex-shrink: 0;
}
.demo02 > .item {
flex-shrink: 1;
}
.demo03 >.item:first-of-type {
flex-shrink: 1;
}
.demo03 > .item:nth-of-type(2) {
flex-shrink: 4;
}
.demo03 > .item:last-child {
flex-shrink: 5;
}
.demo04 >.item:first-of-type {
flex-shrink: 0.1;
}
.demo04 > .item:nth-of-type(2) {
flex-shrink: 0.5;
}
.demo04 > .item:last-child {
flex-shrink: 1.5;
}
.demo05 >.item:first-of-type {
width: 300px;
flex-shrink: 1;
}
.demo05 > .item:nth-of-type(2) {
width: 120px;
flex-shrink: 4;
}
.demo05 > .item:last-child {
width: 200px;
flex-shrink: 5;
}
flex-shrink: 设置弹性元素缩减因子
(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0
item1
item2
item3
(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)
item1
item2
item3
(3): 当三个弹性元素的缩减因为子不相等时
item1
item2
item3
(4): 缩减因子也可以是小数,只要大于就可以
item1
item2
item3
(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
html>
设置弹性元素的基准尺寸div {
box-sizing: border-box;
width: 500px;
border: 1px solid black;
margin: 10px;
}
.item {
box-sizing: border-box;
border: 1px solid red;
background-color: lightgoldenrodyellow;
padding: 15px;
}
.flex {
display: flex;
}
.demo01 > .item {
flex-basis: content;
}
.demo02 > .item {
width: 100px;
}
.demo03 > .item {
flex-basis: auto;
}
.demo04 > .item {
width: 100px;
flex-basis: 150px;
}
.demo05 > .item:first-of-type {
flex-basis:20%;
}
.demo05 > .item:nth-of-type(2) {
flex-basis: 30%;
}
.demo05 > .item:nth-of-type(3) {
flex-basis: 50%;
}
flex-basis: 设置弹性元素的基准尺寸
(1): 在未设置弹性元素宽度时, 以内容宽度显示
item1
item2
item3
(2): 存在自定义元素宽度时,则以该宽度显示
item1
item2
item3
(3): 自动状态下, 由浏览器根据预设值自行判定
item1
item2
item3
(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准
item1
item2
item3
(5): 元素基准宽度支持百分比设置
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
html>
简化弹性元素的基本设置div {
box-sizing: border-box;
width: 500px;
border: 1px solid black;
margin: 10px;
}
.item {
box-sizing: border-box;
border: 1px solid red;
background-color: lightslategrey;
padding: 16px;
}
.flex {
display: flex;
}
.demo01 > .item {
width: 100px;
height: 50px;
/*flex: 0 1 auto;*/
flex: initial;
}
.demo02 > .item {
width: 30px;
height: 60px;
/*flex: 1 0 auto;*/
flex: auto;
}
.demo03 > .item {
width: 150px;
height: 50px;
/*flex: 0 0 auto;*/
flex: none;
}
.demo04 > .item {
width: 100px;
height: 60px;
flex: 1;
}
.demo05 > .item {
width: 150px;
height: 50px;
flex: 0 1 100px;
}
.demo06 > .item:first-of-type {
flex: 1 1 auto;
}
简化弹性元素的基本设置
(1): 根据宽度计算,允许缩减适应容器
item1
item2
item3
(2): 根据宽度计算,元素完全弹性以适应容器
item1
item2
item3
(3): 元素完全失去弹性, 以原始大小呈现
item1
item2
item3
(4): 一个数值表示增长因子,其它值默认: flex: 1 1 auto
item1
item2
item3
(5): 第三个有具体数值时, 以它为计算标准
item1
item2
item3
(6): 单独设置某一个元素弹性大小
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
将flex属性的用法, 手抄, 建议二遍以上
自学:align-self, order的用法
实例
html>
单独设置元素在交叉轴上排列方式div {
width: 500px;
height: 300px;
box-sizing: border-box;
border: 1px solid black;
background-color: lightcoral;
margin: 10px;
}
.item {
width: 100px;
height: 50px;
box-sizing: border-box;
border: 1px solid red;
background-color: lightgreen;
padding: 15px;
}
.flex {
display: flex;
flex-flow: column;
align-items: flex-end;
}
.flex > .item:first-of-type {
align-self: center;
}
.flex > .item:nth-of-type(2) {
width: 100%;
background-color: lightslategrey;
}
.flex > .item:nth-of-type(3) {
align-self: flex-start;
}
单独设置元素在交叉轴上排列方式
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
html>
orderdiv {
width: 500px;
height: 300px;
border: 1px solid red;
margin: 10px 0;
}
.flex {
display: flex;
}
.item {
height: 50px;
border: 1px solid black;
color: black;
padding: 10px;
}
.flex > .item:first-of-type {
order: 3;
}
.flex > .item:nth-of-type(2)
{
order: 1;
}
.flex > .item:nth-of-type(3)
{
order: 2;
}
item1
item2
item3
运行实例 »
点击 "运行实例" 按钮查看在线实例
试着将之前的一些案例用flex布局改定, 例如圣杯布局
实例
html>
4. 试着将之前的一些案例用flex布局改定, 例如圣杯布局header {
height: 50px;
background-color: lightslategray;
}
main {
display: flex;
box-sizing: border-box;
height: 600px;
background-color: lightcoral;
}
article {
flex-grow: 6;
width: 200px;
height: 600px;
background-color: lightgoldenrodyellow;
}
footer {
height: 50px;
background-color: lightskyblue;
}
aside {
width: 100px;
height: 600px;
flex-grow: 2;
}
main>aside:last-of-type {
justify-content: flex-end;
background-color: lightseagreen;
}
main>aside:first-of-type {
justify-content: flex-start;
background-color: lawngreen;
order: -1;
}
头部
内容区
左侧
右侧
底部
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
flex-grow(增长因子)
flex-shrink(缩减因子)
flex-basis(基准尺寸)
笔记