css - flexbox 中的 align-self 属性不起作用
问题描述
我想让 item-2 居中,我无法让 align-self 工作。请问我做错了什么?我已经尝试了 align-self 的所有选项,但它似乎没有注册。
<!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>Flex Align</title>
<style>
#container {
background: #555 ;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
height: 600px;
align-items: baseline;
align-content: space-between;
}
.item-2 {
align-self: center;
}
.item {
background: #f4f4f4;
border: #ccc solid 1px;
padding: 1rem;
text-align: center;
margin: 0.5rem;
flex-basis: 200px;
}
</style>
</head>
<body>
<div id="container">
<div class="item item-1"><h3>Item 1</h3></div>
<div class="item item-2"><h3>Item 2</h3></div>
<div class="item item-3"><h3>Item 3</h3></div>
</div>
</body>
</html>
解决方案
如果您align-content: space-between
从容器中删除 并为 .item 添加高度,则您将能够选择单个项目并将align-self: center
该项目垂直设置在中间。
推荐阅读
- node.js - 如何设置 ask cli set default region 或 aws default region
- multithreading - 如何将我的 Delphi 类(来自 idHTTP)变成“线程”?
- reactjs - 为什么请求的链接没有显示嵌套组件
- c++ - 'SDL_INIT' 未在此范围内声明
- knative - {ip} 上的 .default.svc.cluster.local:没有这样的主机
- javascript - 如何使用 JavaScript 在 GatsbyJS 中选择元素
- python - 单击时未执行 Tkinter 命令按钮且没有错误消息-(不是 () 或缩进问题)-
- azure - 为什么在部署设置中看不到 Azure 上的存储库?
- mongodb - 尝试在 Docker 中运行 MongoDb 时权限被拒绝
- javascript - VUE中数组的数据表