1. 伸缩容器、伸缩项目
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩容器_伸缩项目</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner3 {
display: flex;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner inner3">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
</body>
</html>2. 主轴方向
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴方向</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向（默认值 row 水平从左到右，从上到下） */
/* flex-direction: row-reverse; */
/* 调整主轴的方向（垂直从上到下） */
/* flex-direction: column; */
/* 调整主轴的方向（垂直从下到上） */
flex-direction: column-reverse;
/* 注：改变了主轴方向，侧轴方向也随之改变 */
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>3. 主轴换行方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴换行方式</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: row;
/* 主轴换行方式 */
/* 不换行（默认值） */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
/* 反向换行 */
/* flex-wrap: wrap-reverse; */
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</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 class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>4. flex-flow
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>flex-flow</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
/* flex-direction: row; */
/* 换行 */
/* flex-wrap: wrap; */
/* 复合属性，不常用，不建议 */
flex-flow: row wrap;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</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 class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>5. 主轴对齐方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主轴对齐方式</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: row;
/* 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 主轴的对齐方式，主轴的结束位置 */
/* justify-content: flex-end; */
/* 中间对齐 */
/* justify-content: center; */
/* 项目均匀的分布在一行中，项目与项目之间的距离，项目距边缘的两倍 */
/* justify-content: space-around; */
/* 项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */
/* justify-content: space-between; */
/* 项目均匀的分布在一行中 */
/* justify-content: space-evenly; */
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</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. 侧轴对齐方式—一行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧轴对齐方式_一行</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: row;
/* 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式，侧轴的开始位置对齐 */
/* align-items: flex-start; */
/* 侧轴的对齐方式，侧轴的结束位置对齐 */
/* align-items: flex-end; */
/* 侧轴的对齐方式，侧轴的中间位置对齐 */
/* align-items: center; */
/* 侧轴的对齐方式，基线对齐 */
/* align-items: baseline; */
/* 侧轴的对齐方式，拉升到整个父容器（伸缩的项目不能给高度） ，默认值*/
align-items: stretch;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2 {
width: 200px;
height: 300px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
font-size: 80px;
}
.inner3 {
width: 200px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>7. 侧轴对齐方式—多行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>侧轴对齐方式_多行</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: row;
/* 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */
/* align-content: flex-start; */
/* 侧轴的对齐方式（多行），侧轴的结束位置对齐 */
/* align-content: flex-end; */
/* 侧轴的对齐方式（多行），侧轴的中间位置对齐 */
/* align-content: center; */
/* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘距离的2倍 */
/* align-content: space-around; */
/* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘没有距离 */
/* align-content: space-between; */
/* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的 */
/* align-content: space-evenly; */
align-content: stretch;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2 {
height: 300px;
}
.inner3 {
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>8. 元素的水平垂直居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素的水平垂直居中</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
/* 方案一 */
/* justify-content: center;
align-items: center; */
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
/* 方案二 */
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>9. 项目在主轴的基准长度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目在主轴的基准长度</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: column;
/* 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2 {
/* 默认值 auto，浏览器根据这个属性设置的值，计算主轴上是否有多余空间 */
/* 设置伸缩项目在主轴上的基准长度，若主轴是横向的，则宽失效，若主轴是纵向的，则高失效 */
flex-basis: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>10. 伸缩项目—伸
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩项目_伸</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: wrap;
/* 换行 */
flex-wrap: wrap;
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/*
定义伸缩项目的放大比例，默认值为0，即：纵使主轴存在剩余空间，也不拉伸（放大）
规则：
1.若所有伸缩项目的 flex-grow 值都为1，则：它们将等分剩余空间（若果有剩余空间的话）
2.若三个伸缩项目的 flex-grow 值为1，2，3时，则分别瓜分到剩余空间的1/6，2/6，3/6
*/
flex-grow: 1;
}
.inner2 {
width: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>11. 伸缩项目—缩
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩项目_缩</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 699px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: wrap;
/* 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */
align-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
flex-grow: 1;
/*
定义了项目的压缩比，默认值为1，即：如果空间不足，该项目将会缩小
例：
三个收缩项目，宽度分别为：200px，300px，200px，它们的 flex-shrink 值分别为：1，2，3
若父容器的宽度此时只有400px，则需要收缩
收缩比计算规则：
1.计算分母：(200 * 1) + (300 * 2) + (200 * 3) = 1400
2.计算比例：
项目一：(200 * 1) / 1400 = 比例值1
项目二：(300 * 2) / 1400 = 比例值2
项目三：(200 * 3) / 1400 = 比例值3
3.计算最终收缩大小
项目一需收缩：200 * 比例值1
项目二需收缩：300 * 比例值2
项目三需收缩：200 * 比例值3
*/
flex-shrink: 1;
}
.inner1 {
flex-shrink: 1;
}
.inner2 {
width: 300px;
flex-shrink: 2;
}
.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>12. flex复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>flex复合属性</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 699px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: wrap;
/* 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */
align-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 拉伸 */
/* flex-grow: 1; */
/* 压缩 */
/* flex-shrink: 1; */
/* 基准长度 */
/* flex-basis: 100px; */
/* 可以拉伸，压缩，不设置基准长度时可以简写为 flex: auto; */
/* flex: 1 1 auto; */
/* float: auto; */
/* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */
/* flex: 1 1 0; */
/* flex: 1; */
/* 不拉伸，不压缩，不设置基准长度 */
/* flex: 0 0 auto; */
/* flex: none; */
/* 不可以拉伸，可以压缩，不设置基准长度 */
/* flex: 0 1 auto; */
flex: 0 auto;
}
</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>13. 项目的排序与单独对齐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目的排序与单独对齐</title>
<style>
/*
伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素）
*/
.outer {
width: 600px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启flex布局） */
display: flex;
/* 调整主轴的方向 */
flex-direction: wrap;
/* 换行 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式，主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */
align-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */
flex: 1 1 0;
}
/* 排序，数值越小，排序越靠前 */
/* .inner1 {
order: 1;
}
.inner2 {
order: -1;
}
.inner3 {
order: -2;
} */
/* 通过 align-self 可以单独设置某个伸缩项目的对齐方式，默认值为 auto，表示继承父元素的 align-items 属性 */
.inner2 {
/* align-self: flex-end; */
align-self: center;
}
</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>
评论 (0)