如何使用CSS显示等宽的div？

Question

我正在从数据库获取输出。有时我会得到 2 个 div，有时我会得到 3 个 div，所以我必须设置 div 的宽度相等。我的意思是，如果有 2 个 div，则设置每个 div 的 50%，如果有 3 个 div，则设置每个 div 的 33.33%。你愿意帮我吗？

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    width: 50%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

#container1 div:nth-of-type(3)
{
    width: 33.33% !important;
}

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

使用flex: 1 100%和删除宽度：

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>

Answer 2

用于flex:1儿童和display:flex家长

注意：不需要width，也不适合display:inline-block儿童

.ct {
  width: 100%;
  display: flex;
}

.ct div {
  color: #fff;
  height: 100%;
  background: #24252A;
  text-align: center;
  cursor: default;
  padding: 2em 0;
  flex: 1
}

.ct div:nth-of-type(2) {
  background: red;
}

<div class="ct" id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>
<hr />
<div class="ct" id="container2">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>