【CSS入门学习】Flex布局设置div水平、垂直分布与居中
水平平均分布
<!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>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 200px;
height: 100px;
background-color: antiquewhite;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="item">左侧内容</div>
<div class="item">中间内容</div>
<div class="item">右侧内容</div>
</div>
</body>
</html>
一左一右
将<div class="item">中间内容</div>注释掉，只保留左右两个div：
还可以分别设置左右div的宽度：
<!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>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 200px;
height: 100px;
background-color: antiquewhite;
border: 1px solid;
}
.left {
width: 30%;
}
.right {
width: 60%;
}
</style>
</head>
<body>
<div class="container">
<div class="item left">左侧内容</div>
<div class="item right">右侧内容</div>
</div>
</body>
</html>
水平居中
再item类中增加一条样式：
text-align: center;
则只能水平居中。
水平、垂直居中
使用Flex进行水平垂直居中，在item类中增加样式：
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
所以要让一个div里面的内容水平、垂直居中，可以将这个div变成flex布局，再设置justify-content和align-items属性。
垂直平均分布
<!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>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item {
width: 200px;
height: 100px;
background-color: antiquewhite;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="item">上侧内容</div>
<div class="item">中间内容</div>
<div class="item">下侧内容</div>
</div>
</body>
</html>
则效果：
可以为container 类增加一个高度样式：
height: 500px;
则效果：
再在container类增加样式，使水平居中：
align-items: center;
效果图：
再在item类中增加样式，使各个小div中文本水平垂直居中：
display: flex;
justify-content: center;
align-items: center;
则效果：
