Проблемы 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>@AndyHoffman Я обнаружил проблему и отредактировал свой вопрос. хочу подтвердить свое подозрение о гибкости и найти лучшее решение.
Можете ли вы включить скриншот, показывающий, в чем проблема, визуально?
У меня есть подозрение, что вы хотите добавить flex-direction: column; к flex-row, что устранит необходимость во всей этой 100% чепухе.
@AndyHoffman добавил скриншоты
Ответы 4
Вам нужно изменить направление вашего содержимого 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>Спасибо за информацию, это логично
Я думаю, что самое простое решение получить ваш макет — не добавлять CSS.
Причина, по которой у вас простой макет, который элемент, который вы использовали h2 и p, дает вам по умолчанию, как и у них display: block
Как уже упоминалось, если вы пытаетесь получить часть «Этот раздел будет только ...» на следующую строку, а не на ту же строку, проблема заключается в свойстве flexbox по умолчанию flex-direction.
Когда вы присваиваете display: flex; значение .flex-row, по умолчанию автоматически устанавливается значение flex-direction: row;, в результате чего объекты располагаются рядом друг с другом по горизонтали, а не по вертикали.
Все, что вам нужно сделать, это переопределить значение по умолчанию, добавив flex-direction: column; к .flex-row (и удалив flex: 0 0 100%; flex-wrap: wrap;).
Спасибо за информацию, помогли прояснить ее вместе с помощью Энди.
p,
h2 {
margin: 0 0 10px;
width: 100%;
line-height: 1.4;
}
.flex-row {
padding: 10px 10px 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
border: 1px solid red;
border-radius: 15px;
box-shadow: 0 0 10px red;
}<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>
Непонятно, что вы спрашиваете.