html - 带有换行符的 Flex HTML CSS 问题

Question

我在下面有以下 css 属性，它在这里工作，但我无法让它在生产环境中工作。它迫使我添加“flex: 0 0 100%”。现在我的解决方案是设置 *{flex: 0 0 100%}，我的假设是它与 flex-basis 有关。有人有更好的解决方案吗？

没有我的全局解决方案的屏幕截图渲染

使用我的全局解决方案呈现的屏幕截图

<style>
.flex-container, .flex-row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
}

.flex-row {
  margin-bottom: 15px;
}

#my-account .warning-message {
  width: 100%;
  padding: 15px;
  border: 1px solid red;
  border-radius: 15px;
  -webkit-box-shadow:0 0 10px red; 
  -moz-box-shadow: 0 0 10px red; 
  box-shadow:0 0 10px red;
}
</style>

<div class="flex-row warning-message">
  <h2>No warnings!</h2>
  <p>This section will only load when a warning is picked up on the account, in the production environment</p>
</div>

Answer 1

您需要更改 flexbox 内容的方向。默认为 row，但您应该使用 column。请注意我是如何删除 100% 值并且内容仍然正确堆叠的。

.flex-container,
.flex-row {
  display: flex;
  flex-direction: column;
}

#my-account .warning-message {
  padding: 15px;
  border: 1px solid red;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 10px red;
  -moz-box-shadow: 0 0 10px red;
  box-shadow: 0 0 10px red;
}

/* Ignore */
.flex-row h2,
.flex-row p {
  margin: 0;
}

<div id="my-account">
  <div class="flex-row warning-message">
    <h2>No warnings!</h2>
    <p>This section will only load when a warning is picked up on the account, in the production environment</p>
  </div>
</div>