学习视频来源:【黑马!真的很详细!】CSS3-flex布局(flex布局的单个知识点忘记也可以复习)_哔哩哔哩_bilibili
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2){
flex: 1;
background-color: green;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
p{
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span{
/* 均分剩余部分 */
flex: 1;
}
p span:nth-child(2){
/* 第二个部分占2份 */
flex: 2;
background-color: blueviolet;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<p>
<span>4</span>
<span>5</span>
<span>6</span>
</p>
</body>
</html>
第一行是控制两边固定,中间是占了剩余的全部,
第二行是中间的第5个块占了所以的两份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让3个子盒子同时在侧轴上移动 */
/* 沿侧轴底侧对齐 */
/* align-items: flex-end; */
/* 我们想只让3号盒子下来底侧 */
/* 只能给3号盒子格外提出来了,不能在父盒子里面加了 */
}
div span{
width: 150px;
height: 100px;
background-color: purple;
margin-right:5px;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
只让第3个盒子下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让3个子盒子同时在侧轴上移动 */
/* 沿侧轴底侧对齐 */
/* align-items: flex-end; */
/* 我们想只让3号盒子下来底侧 */
/* 只能给3号盒子格外提出来了,不能在父盒子里面加了 */
}
div span{
width: 150px;
height: 100px;
background-color: purple;
margin-right:5px;
}
div span:nth-child(3){
align-self: flex-end;
}
/* 更改顺序用order,默认是0 */
/* 让2号盒子到最前面 -1比0小,所以在前面*/
div span:nth-child(2){
order: -1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>