当 div 包装在 'flex' 父容器中时，证明内容不起作用

Question

我有一个已设置为 'flex' 的容器，但我现在正尝试将 'justify-content: space-evenly' 传递给按钮容器，但它似乎不起作用。有什么想法吗？

.full-width {
  width: 100%;
}

.banner__container {
  display: flex;
  justify-content: space-evenly;
  background-color: #f6f6f6;
}

.button__container {
  display: flex;
  justify-content: space-evenly;
}

<div class="full-width">
  <div class="banner__container">
    <div>
      <p>
        Lorem
      </p>
    </div>
    <div class="button__container">
      <a href="">Yes</a>
      <a href="">No</a>
      <button>Close</button>
    </div>
  </div>
</div>

Answer 1

一切正常。您只需为 .banner__container.

的子 div 设置适当的 flex 值

我通过将 flex: 1; 设置为 .banner__container div 来做到这一点。这将为 .banner__container

内的每个 div 提供相等的宽度

.full-width {
    width: 100%;
}

.banner__container {
    display: flex;
    justify-content: space-evenly;
    background-color: #f6f6f6;
}

.banner__container div {
    flex: 1;
}

.button__container {
    display: flex;
    justify-content: space-evenly;
}

<div class="full-width">
    <div class="banner__container">
        <div>
            <p>
                Lorem
            </p>
        </div>
        <div class="button__container">
            <a href="">Yes</a>
            <a href="">No</a>
            <button>Close</button>
        </div>
    </div>
</div>

Answer 2

您可以将 button__container 设置为 display:inline。

.full-width {
  width: 100%;
}

.banner__container {
  display: flex;
  justify-content: space-evenly;
  background-color: #f6f6f6;
}

.button__container {
  display: inline;
  justify-content: space-evenly;  
}
.button__container a, .button__container button {
   margin-right: 20px;
}

<div class="full-width">
  <div class="banner__container">
    <div>
      <p>
        Lorem
      </p>
    </div>
    <div class="button__container">
      <a href="">Yes</a>
      <a href="">No</a>
      <button>Close</button>
    </div>
  </div>
</div>

当 div 包装在 'flex' 父容器中时，证明内容不起作用

justify-content is not working when div is wrapped in 'flex' parent container

css

flexbox