flex布局
一、flex布局体验
1.传统布局和flex布局
<!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>flex布局体验</title>
<style>
div {
/* 给父亲添加flex布局 */
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 设置主轴上的子元素的排列方式 */
justify-content: space-around;
}
span {
height: 100px;
margin-right: 5px;
background-color: skyblue;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>这是第一个</span>
<span>这是第二个</span>
<span>这是第三个</span>
</div>
</body>
</html>
二、flex布局原理
1.任何一个容器都可以指定为flex布局，当我们为父盒子设为flex布局时，子元素的float、clear、和vertical-align属性将失效
2.flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
三、flex布局父项常见属性
常见父级属性（以下属性是对父元素设置的）
1.flex-direction
1.flex-direction:设置主轴的方向
- 主轴的方向默认的是x轴（row），水平向右
- 侧轴的方向就是y轴的方向（column），水平向下
<!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>flex设置主轴方向</title>
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 设置主轴的方向默认是x轴 row */
/* y轴就是侧轴，column */
/* flex-direction: row; */
/* flex-direction: column; */
/* 翻转x轴和y轴 */
/* flex-direction: column-reverse; */
flex-direction: row-reverse;
}
div span {
width: 150px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2.justify-content
2.justify-content：设置主轴上子元素的排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪一个
<!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>flex设置主轴上的子元素排列方式1</title>
<style>
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 默认的主轴是x轴row */
flex-direction: row;
/* justify-content: 是设置主轴上子元素的排列方式 */
/*从左到右排列*/
/* justify-content: flex-start; */
/*从尾部开始排列*/
/* justify-content: flex-end; */
/*让主轴上的子元素居中对齐*/
/* justify-content: center; */
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 先两边贴边，在分配剩余的空间 */
justify-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.flex-wrap
3.flex-wrap：设置子元素是否换行，默认情况下，项目都排在一条线上，flex-wrap属性定义，flex布局中默认是不换行的。
<!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>flex-wrap子元素是否换行</title>
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* flex布局中，默认的子元素是不换行的,如果装不开，会缩小元素的宽度，放到父元素里面 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
}
div span {
margin-right: 5px;
width: 150px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</body>
</html>
4.align-items
4.align-items：设置侧轴上的子元素排列方式（单行），该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候用
<!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>flex设置侧轴上子元素的排列方式</title>
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* 默认的主轴是x轴 row */
flex-direction: column;
justify-content: center;
/* 我们需要一个侧轴居中 */
/* 拉伸，盒子不要给高度 */
/* align-items: stretch; */
/* 单行 */
align-items: center;
}
div span {
width: 150px;
height: 100px;
margin: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</body>
</html>
5.align-content
5.align-content：设置侧轴上的子元素排列方式（多行），设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
<!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>flex设置侧轴对齐方式</title>
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们使用align-content */
/* align-content: flex-end; */
/* align-content: flex-start; */
/* align-content: center; */
/* align-content: space-around; */
align-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</body>
</html>
6.align-content 和 align-items 区别
6.align-content 和 align-items 区别
7.flex-flow
7.flex-flow：是flex-direction和flex-wrap属性的复合属性
<!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>flex-flow复合属性</title>
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* flex-direction: row-reverse;
flex-wrap: wrap; */
/* 把设置主轴方向和是否换行（换列)简写 */
flex-flow: row-reverse wrap;
}
div span {
margin-right: 5px;
width: 150px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
四、flex布局子项常见属性
1.flex子项目占的分数
flex属性：定义子项目分配剩余空间，用flex来表示占多少份数
<!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>flex子项flex份数</title>
<style>
section {
display: flex;
width: 50%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: skyblue;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: purple;
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: green;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
2.align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
<!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>align-self和order</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个盒子沿着侧轴底对齐 */
/* align-items: flex-end; */
}
/* 我们只想让3号盒子下来底侧 */
/* div span:nth-child(3) {
align-self: flex-end;
} */
/* 我们也可以只让2号盒子下来底侧 */
div span:nth-child(2) {
align-self: flex-end;
}
div span:nth-child(3) {
/* 默认是0 -1比0小所以在前面 */
order: -1;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.order属性定义子项的排列顺序（前后排序）
order属性：数值越小，排列越靠前，默认为0，注意，和z-index不一样
<!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>align-self和order</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个盒子沿着侧轴底对齐 */
/* align-items: flex-end; */
}
/* 我们只想让3号盒子下来底侧 */
/* div span:nth-child(3) {
align-self: flex-end;
} */
/* 我们也可以只让2号盒子下来底侧 */
div span:nth-child(2) {
align-self: flex-end;
}
div span:nth-child(5) {
order: 2;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</body>
</html>
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
