gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:18:45 25 4
gpt4 key购买 nike

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

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

enter image description here

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

<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>

关于html - 带有换行符的 Flex HTML CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55053996/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com