为什么我需要“融合”两个对象来使用"display: flex;“CSS？

Question

在此代码中，这两个框将同时出现(水平)。

<style>
  #box{
    display: flex;
    height: 500px;

  }
#box-1 {
    background-color: blue;
    width: 50%;
    height: 50%;
  }

#box-2 {
    background-color: red;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

为什么我不把它们排列在“方框”下面，它们显示为两个分开的元素，一个在另一个下面？尽管我在两种框样式中都使用了display: flex;，但为什么它没有显示在上面的代码中。正如我所理解的(从网上阅读)，这个函数是为了使它们都出现在上面的代码中。

#box-1 {
    background-color: blue;
    width: 50%;
    height: 50%;
    display: flex;
  }

#box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
    display: flex;
  }
</style>

<div id="box-1"></div>
<div id="box-2"></div>

我希望第二个代码应该与第一个代码相同。我明白(从结果中)我可能错了，但我不明白为什么。

谢谢!

Answer 1

使您的'box1和box2‘出现在一行中的是其父元素-- #box元素！中的display: flex设置，这使得其子元素"flex“--子元素不需要任何设置就可以成为flex (您可以从子元素的规则中删除flex内容)，这都是由于父元素中的设置。