我想创建一个框，在左边和右边有一个蓝色的“div”，在中间有一个更大的紫色“div”。我的问题是，当我写“align-items：中心”所有“div”消失了，但我不知道为什么。你能帮助我吗？
这是我的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="anotherExample">
<div class="sidebar"></div>
<div class="mainContent"></div>
<div class="sidebar"></div>
</section>
</body>
</html>这是我的CSS代码
#anotherExample{
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
justify-content: center;
/*align-items: center;*/
}
section .sidebar{
background-color: blue;
flex-grow:1 ;
flex-basis: 200px;
}
section .mainContent{
background-color: blueviolet;
flex-grow:2 ;
flex-basis: 200px;
}
2条答案
按热度按时间6tr1vspr1#
看起来当你应用
align-items: center时，div元素的height被设置为0。你可以尝试将height属性添加到div中，以再次查看它们，因为#anotherExample是那些div元素的父元素。第一个
mrfwxfqh2#
所有
div都消失，因为当align-items: center时，它们没有height。对于弹性项目，默认
align-items的行为与stretch相同。三个div将拉伸到其容器高度。当您设置
align-items: center时，三个div将在交叉轴上居中，但由于没有高度（因为它们没有内容或设置高度）而不可见。如果你给予它们一个高度，比如
height: 100%，你就可以再次看到这三个div。More about
align-items示例：
第一个