1.felx布局原理
2.flex-direction设置主轴的方向
https://blog.csdn.net/weixin_51081257/article/details/121301537#t1
1.主轴与侧轴
2.属性值
3.justify-count设置主轴的子元素排列方式
属性值：
1.flex-start
2.flex-end
3.center
4.spaace-around
5.space-between
6.space-evenly
4.align-items侧轴上的子元素排列（单行）
1.flex-start
2.flex-end
3.center
4.stretch
3.justify-content 属性定义了项目（子元素）在主轴上的排列方式
1.nowrap
2.wrap
6.align-contet设置侧轴上子元素的排序方式
1.flex-star
2.flex-end
3.center
4.space-around
5.space-between
6.stretch
7.space-evenly
7.align-content和alignitems区别
8.flex-flow
1. felx布局原理
flex布局的元素，称为Flex容器（flex container），简称“容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。
开启弹性布局后所有的项目会在同一行显示,项目宽度不足，会自动收缩。
子容器可以横向排列也可以纵向排列。
项目也可以开启弹性布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
width: 800px;
height: 800px;
background-color: skyblue;
}
.item {
width: 200px;
height: 200px;
margin: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</body>
</html>
2.flex-direction设置主轴的方向
2.1主轴与侧轴
1.默认主轴方向就是x轴方向，水平向右
2.默认侧轴方向就是y轴方向，垂直方向
2.2属性值
1.flex-direction:row
section ul {
display: flex;
flex-direction: row;
}
section li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 10px;
background-color: pink;
list-style:none;
}
2. flex-direction:column
section ul {
display: flex;
flex-direction: column;
}
section li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 10px;
background-color: pink;
list-style:none;
}
3. flex-dirrection:row-reverse调整主轴方向（默认为水平方向）
复制代码
section ul {
display: flex;
flex-direction: row-reverse;
}
section li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 10px;
background-color: pink;
list-style:none;
}
4.flex-direction:column-reverse
section ul {
display: flex;
flex-direction: column-reverse;
}
section li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 10px;
background-color: pink;
list-style:none;
}
3.justify-content 属性定义了项目（子元素）在主轴上的排列方式
<style>
div{
display: flex;
width: 88%;
height: 500px;
background-color: skyblue;
/* 默认选项 justify-content: flex-start; */
justify-content: flex-start;
/* 让项目（子元素）在盒子中向最后对齐 顺序不会变123还是123 justify-content: flex-end; */
/* justify-content: flex-end; */
/* 让项目（子元素）在盒子中居中对齐 中间无缝隙 justify-content: center; */
/* justify-content: center; */
/* 平分盒子 俩边靠边 justify-content: space-between; */
/* justify-content: space-between; */
/* 平分剩余空间 两边不靠边 */
/* justify-content: space-around; */
}
div span{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
3.1 flex-stat 默认值 从头部开始 如果主轴是x轴 则从左到右
3.2 flex-end 从尾部开始排列
3.3 justify-content: ccenter 在主轴居中对齐 如果主轴是x轴 则水平居中
3.4 justify-content: space-between; 平分剩余空间
3.5 space-between 先两边贴边 在平分剩余空间 …重要
3.6 justify-count: space-evenly 均匀排列每个元素,每个元素之间的间隔相等
div#main
{
display: flex;
justify-content:space-evenly;
} 
4. align-items侧轴上的子元素排列（单行）
1.align-items的属性值：
| 属性值 | 含义 |
|---|---|
| flex-start | 子元素贴着侧轴的头部排列（默认值） |
| flex-end | 子元素贴着侧轴的尾部排列 |
| center | 子元素在侧轴上居中对齐 |
| stretch | 拉伸，使得子元素在侧轴方向上与父元素等大 |
2. align-items :flex-start
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: flex-start; /*默认值*/
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>执行结果 :子元素贴着侧轴的头部排列（顶端对齐）
2. align-items:flex-end
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: flex-end;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>执行结果：子元素贴着侧轴的尾部排列（底端对齐）
3.align-items:center
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: center;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>执行结果：子元素在侧轴上居中对齐
4.align-items:stret
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: stretch;
}
div span{
width: 200px;
/*height: 100px;*/
background: skyblue;
}
</style>在使用stretch属性值时，不要给子元素高度/宽度（侧轴为y轴时不给高度，侧轴为x轴时不给宽度），否则在侧轴方向上将没有拉伸效果
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: stretch;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：因为给子元素span设置了高度为100px，故在侧轴上实现不了拉伸效果
5.flex-wrap设置子元素是否换行
flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素宽度放到父元素里。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-wrap</title>
<style>
div{
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: aqua;
/* flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素宽度放到父元素里。 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
}
div span{
width: 150px;
height: 100px;
background-color: pink;
color: red;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>3</span>
<span>3</span>
</div>
</body>
</html> 
6.align-content
align-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式
注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效
align-content的属性值：
| 属性值 | 含义 |
| flex-start | 子元素在侧轴的头部开始排列 （默认值） |
| flex-end | 子元素在侧轴的尾部开始排列 |
| center | 子元素在侧轴上居中显示 |
| space-around | 子元素在侧轴上平分剩余空间 |
| space-between | 子元素线贴着侧轴的两边，再平分剩余空间 |
| stretch | 设置子元素高度，平分父元素高度 |
align-content:flex-start
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap; /* 有了换行,故侧轴上的排列方式用align-content */
align-content: flex-start;
}
div span{
width: 150px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>
运行结果：子元素从侧轴的头部开始排列
align-content:flex-end
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap;
align-content: flex-end;
}
div span{
width: 150px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>
运行结果：子元素从侧轴的尾部开始排列
align-content:center (居中对齐)
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap;
align-content: center;
}
div span{
width: 150px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>运行结果：子元素在侧轴上居中对齐
align-content:space-around(平分剩余空间)
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap;
align-content: space-around;
}
div span{
width: 150px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>运行结果：
align-content:space-beween (贴着侧轴的两边，再平分侧轴上的剩余空间)
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap;
align-content: space-between;
}
div span{
width: 150px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>运行结果：
align-content:stretch(除去子元素所占高度，再平分父元素高度)
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-wrap: wrap;
align-content: stretch;
}
div span{
width: 150px;
height: 50px;
background: skyblue;
margin: 0 10px;
}
</style>
运行结果：
7.align-content和alignitems区别
1：共同点：它们对齐方向为交叉轴
2：不同点：align-content 应用于为 多行 而 align-items:应用于单行。
8.flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
