html - 带有换行符的 Flex HTML CSS 问题
问题描述
我在下面有以下 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>
解决方案
您需要更改 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>