【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;
则效果：
