Flex HTML CSS Проблемы с переносами строк

Question

У меня есть следующие атрибуты css, они работают здесь, но я не могу заставить их работать в производственной среде.Это вынуждает меня добавить 'flex: 0 0 100%'.На данный момент мое решение состоит в том, чтобы установить * {flex: 0 0 100%}, я предполагаю, что это связано с flex-based.У кого-нибудь есть лучшее решение?

Рендеринг скриншотов без моего глобального решения

Рендеринг скриншотов с моим глобальным решением

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

Answer 2

Как уже упоминали другие, если вы пытаетесь получить часть «Этот раздел будет только ...» на следующей строке, а не на той же строке, проблема в свойстве flexbox по умолчанию flex-direction.

Когда вы задали display: flex; для .flex-row, по умолчанию автоматически устанавливается flex-direction: row;, в результате чего объекты располагаются рядом друг с другом по горизонтали, а не по вертикали.

Все, что вам нужно сделатьпереопределяет значение по умолчанию, добавляя flex-direction: column; к .flex-row (и удаляя flex: 0 0 100%; flex-wrap: wrap;).

Answer 3

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>

Answer 4

Я думаю, что самое простое решение для получения макета - не добавлять CSS.

Причина, по которой у вас простой макет, который дает элемент, который вы использовали h2 и p,по умолчанию, поскольку они имеют display: block