[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
height: 200px;
background: #ccc;
margin: 30px auto;
display: flex;
justify-content: space-evenly;
align-items: center;
/* flex-wrap: wrap;
align-content: center; */
}
/* 当垂直居中时，如果不换行nowrap,align-items: center; 如果多行wrap,要用align-content: center; */
p{
width: 100px;
height: 20px;
background: lightpink;
border:2px solid lightblue;
}
</style>
</head>
<body>
<div>
<p class="part1">1</p>
<p class="part1">2</p>
<p class="part1">3</p>
<p class="part1">4</p>
<p class="part1">5</p>
</div>
</body>
</html>
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
margin: 20px auto;
height: 200px;
display: flex;
box-sizing: border-box;
border: 2px solid navajowhite;
}
/* p元素同时存在width和flex-shrink时，实际width的计算方法 */
p{
width: 300px;
height: 100px;
}
p:nth-child(1){
background: brown;
}
p:nth-child(2){
background: yellowgreen;
}
.part1{
flex-shrink: 1;
}
/* .part1的width是300px，两个p元素的width为600px，但是div的width是400px；所以超出了200px，shrink的均值是200px/4 = 50px，所以.part1的实际width是300-50 = 250px */
.part2{
flex-shrink: 3;
}
/* .part2的width是300px，两个p元素的width为600px，但是div的width是400px；所以超出了200px，shrink的均值是200px/4 = 50px，所以.part2的实际width是300-50*3 = 150px */
</style>
<body>
<div>
<p class="part1"></p>
<p class="part2"></p>
</div>
</body>
</html>
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
/* p元素同时存在width和flex-grow时，实际width的计算方法 */
div{
width: 400px;
margin: 20px auto;
height: 200px;
display: flex;
border: 2px solid navajowhite;
}
p{
width: 100px;
height: 100px;
}
p:nth-child(1){
background: brown;
}
p:nth-child(2){
background: yellowgreen;
}
.part1{
flex-grow: 3;
}
/* .part1的width是100px，两个p元素的width为200px，但是div的width是400px；所以多余出了200px，grow的均值是200px/4 = 50px，所以.part1的实际width是100+50*3 = 250px */
.part2{
flex-grow: 2;
}
/* .part2的width是100px，两个p元素的width为200px，但是div的width是400px；所以多余出了200px，grow的均值是200px/4 = 50px，所以.part2的实际width是100+50*2 = 200px */
</style>
<body>
<div>
<p class="part1"></p>
<p class="part2"></p>
</div>
</body>
</html>
