将课堂中的全部案例照写一遍, 并达到默写级别
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置弹性元素的增长因子</title>
<style>
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;
}
</style>
</head>
<body>
<h1>flex-grow: 设置弹性元素增长因子</h1>
<h3>(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)</h3>
<div class="flex demo01">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(2): 将全部剩余空间分配给指定弹性元素,例如: 第1个</h3>
<div class="flex demo02">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(3): 全部剩余空间按增长因子在不同弹性元素间分配</h3>
<div class="flex demo03">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置弹性元素的缩减因子</title>
<style>
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;
}
</style>
</head>
<body>
<h1>flex-shrink: 设置弹性元素缩减因子</h1>
<h3>(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3>
<div class="flex demo01">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3>
<div class="flex demo02">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(3): 当三个弹性元素的缩减因为子不相等时</h3>
<div class="flex demo03">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(4): 缩减因子也可以是小数,只要大于就可以</h3>
<div class="flex demo04">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3>
<div class="flex demo05">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置弹性元素的基准尺寸</title>
<style>
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%;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<h3>(1): 在未设置弹性元素宽度时, 以内容宽度显示</h3>
<div class="flex demo01">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(2): 存在自定义元素宽度时,则以该宽度显示</h3>
<div class="flex demo02">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(3): 自动状态下, 由浏览器根据预设值自行判定</h3>
<div class="flex demo03">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3>
<div class="flex demo04">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(5): 元素基准宽度支持百分比设置 </h3>
<div class="flex demo05">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简化弹性元素的基本设置</title>
<style>
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;
}
</style>
</head>
<body>
<h1>简化弹性元素的基本设置</h1>
<h3>(1): 根据宽度计算,允许缩减适应容器</h3>
<div class="flex demo01">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(2): 根据宽度计算,元素完全弹性以适应容器</h3>
<div class="flex demo02">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(3): 元素完全失去弹性, 以原始大小呈现</h3>
<div class="flex demo03">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(4): 一个数值表示增长因子,其它值默认: flex: 1 1 auto</h3>
<div class="flex demo04">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(5): 第三个有具体数值时, 以它为计算标准</h3>
<div class="flex demo05">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>(6): 单独设置某一个元素弹性大小 </h3>
<div class="flex demo06">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
将flex属性的用法, 手抄, 建议二遍以上
自学:align-self, order的用法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独设置元素在交叉轴上排列方式</title>
<style>
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;
}
</style>
</head>
<body>
<h1>单独设置元素在交叉轴上排列方式</h1>
<div class="flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>order</title>
<style>
div {
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;
}
</style>
</head>
<body>
<div class="flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
试着将之前的一些案例用flex布局改定, 例如圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4. 试着将之前的一些案例用flex布局改定, 例如圣杯布局</title>
<style>
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;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
flex-grow(增长因子)
flex-shrink（缩减因子）
flex-basis（基准尺寸）
笔记
