【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;

则效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/7905.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！