伸缩盒模型
1 简介
2 伸缩项目与伸缩容器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩项目</title>
<style>
.outer {
width: 800px;
height: 500px;
background-color: aqua;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
}
.inner3 {
display: flex;
}
.inner3 {
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
</body>
</html>
3 主轴与侧轴
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴与侧轴</title>
<style>
.outer {
width: 800px;
height: 500px;
background-color: aqua;
display: flex;
margin: 0 auto;
flex-direction: column-reverse;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
4 主轴换行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴换行方式</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: green;
display: flex;
margin: 0 auto;
flex-wrap: wrap-reverse;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div>
</body>
</html>
5 主轴对齐方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴换行方式</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: green;
display: flex;
margin: 0 auto;
flex-wrap: wrap;
justify-content: space-evenly;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
6 侧轴对齐方式
6.1 一行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧轴对齐方式(一行)</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.inner2 {
height: 300px;
}
.inner3 {
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
6.2 多行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧轴对齐方式(多行)</title>
<style>
.outer {
width: 800px;
height: 700px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-content: stretch;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.inner2 {
height: 300px;
}
.inner3 {
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner1">1</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
7 flex-basis
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目在主轴的基准长度</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
align-items: start;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.inner2 {
flex-basis: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
8 flex-grow
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩项目-伸</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: start;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.inner1 {
flex-grow: 1;
}
.inner2 {
flex-grow: 2;
width: 300px;
}
.inner3 {
flex-grow: 3;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
9 flex-shrink
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩项目-伸</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: start;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
}
.inner1 {
flex-shrink: 1;
}
.inner2 {
flex-shrink: 2;
width: 300px;
}
.inner3 {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>
10 项目的排序与单独对齐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目的排序与单独对齐</title>
<style>
.outer {
width: 800px;
height: 600px;
background-color: rgb(63, 211, 206);
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: start;
}
.inner {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.inner1 {
order: 2;
}
.inner2 {
width: 300px;
order: 1;
align-self: center;
}
.inner3 {
order: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>