演示

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>

为什么当我不将它们排列在“框”下时，它们显示为2个单独的元素，一个在另一个下面？即使我在两个方框样式中都使用了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出现在一行中的原因是它们的 parent 元素中的display: flex设置-#box元素！这使得其子元素成为“弹性项目”-子元素不需要任何设置即可成为弹性项目（您可以从子元素的规则中删除弹性内容），这都是由于设置在父元素中。

Answer 2

为什么当我不将它们排列在“框”下时，它们显示为2个单独的元素

这是因为默认情况下，div个元素具有display:block，这意味着它需要从左到右拥有自己的行，这就是为什么它们在另一个下面堆叠的原因

但是display:flex使元素block level flex container与block相同，只是它也影响子元素，子元素变为flex items，您可以在其中使用flex属性进行控制{ {3}}，并且默认情况下，其属性flex-direction设置为row意味着flex items将水平显示为一行

演示

.box {
  display: flex;
  height: 100px;
  width:100px;
}

.box-1 {
  background-color: blue;
  flex: 1;
}

.box-2 {
  background-color: red;
  flex: 1
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

<h2>flex-direction: row</h2>
<div class="box row">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>


<h2>flex-direction: column</h2>
<div class="box column">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

可能想考虑使用flex属性而不是width

为什么我需要“融合”两个对象才能使用“ display：flex;” CSS？

2 个答案:

演示