当我使用 \"align-items : center\" 时 Div 消失了答案

【问题标题】：Div vanishes when i use "align-items : center"当我使用 \"align-items : center\" 时 Div 消失了
【发布时间】：2022-11-19 02:23:50
【问题描述】：

我想创建一个盒子，它的左右两侧都有一个蓝色的“div”，中间有一个更大的紫色“div”。我的问题是，当我写“align-items : center”时，所有“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;
 }

【问题讨论】：

标签： html css flexbox

【解决方案1】：

看起来当你应用align-items: center时，div元素的height被设置为0。您可以尝试将 height 属性添加到 div 以再次查看它们，因为 #anotherExample 是那些 div 元素的父级。

#anotherExample{
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 section .sidebar{
    height: 100%;
    background-color: blue;
    flex-grow:1;
    flex-basis: 200px;

 }

 section .mainContent{
    height: 100%;
    background-color: blueviolet;
    flex-grow:2 ;
    flex-basis: 200px;
 }

<h1>Let's Play With Flexbox</h1>

    <section id="anotherExample">
        <div class="sidebar"></div>
        <div class="mainContent"></div>
        <div class="sidebar"></div>
    </section>

【讨论】：

【解决方案2】：

所有div 都消失了，因为他们在align-items: center 时没有height。

对于 flex 项目，默认的 align-items 表现为 stretch。三个div 被拉伸到它们的容器高度。

当你设置align-items: center时，这三个div以横轴为中心，但由于没有高度而不可见（因为它们没有内容或设置高度）。

如果你给他们一个高度比如height: 100%，你可以再次看到这三个div。

More about align-items

例子：

#anotherExample {
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  justify-content: center;
  /* ?  With this turn on the div will no height will vanish */
  align-items: center;
}

section .sidebar {
  background-color: blue;
  flex-grow: 1;
  flex-basis: 200px;
  /* ?  Give div a height to see it when align-items is center */
  height: 100%;
}

section .mainContent {
  background-color: blueviolet;
  flex-grow: 2;
  flex-basis: 200px;
  /* ?  Give div a height to see it when align-items is center */
  height: 100%;
}

<h1>Let's Play With Flexbox</h1>

<section id="anotherExample">
  <div class="sidebar"></div>
  <div class="mainContent"></div>
  <div class="sidebar"></div>
</section>

【讨论】：