Почему «<br class =« break » />» не вызывает разрыва линии в гибком контейнере, но «<span class = break />» делает? [зак ⇐ CSS

[Anonymous]

Играя с гибкими контейнерами, я хотел добавить несколько разрывов в определенных позициях.

Код: Выделить всё

.break {
flex-basis: 100%;
height: 0;
}
< /code>
Когда я вставил
< /code>, тогда строка просто продолжилась, но когда я вставил  < /code>, был добавлен линейный разрыв. Пример < /h1>
Я решил не удалять окружающую сетку (если она актуальна), и цвета фоновых цветов просто для того, чтобы помочь отладке сетки.@media screen {
.grid-1 {               /* main grid */
display: grid;
grid-template-areas:
'g1-head'
'g1-info'
'g1-main'
'g1-foot';
grid-template-columns: 1fr;
height: max-content;
column-gap: 1rem;
row-gap: max(min(0.5rem, 10vh), 2rem);
box-sizing: border-box;
}

/* grid area cannot be assigned directly */
.g1-head { grid-area: g1-head; font-size: var(--font-size-large); background-color: #6602; }
.g1-info { grid-area: g1-info; font-size: var(--font-size-small); background-color: #0062; }
.g1-main { grid-area: g1-main; font-size: var(--font-size-norm); background-color: #0602; }
.g1-foot { grid-area: g1-foot; font-size: var(--font-size-small); background-color: #3032; }

.grid-2 {               /* sub-grid */
display: grid;
grid-template-areas:
'g2-info'
'g2-main'
'g2-foot'
'g2-subm';
grid-template-columns: 1fr;
column-gap: 1rem;
/*row-gap: max(min(0.5rem, 10vh), 1.2rem);*/
box-sizing: border-box;
}

/* grid area cannot be assigned directly */
.g2-info { grid-area: g2-info; font-size: var(--font-size-small); background-color: #c002; }
.g2-main { grid-area: g2-main; font-size: var(--font-size-norm); background-color: #0c02; }
.g2-subm { grid-area: g2-subm; font-size: var(--font-size-norm); background-color: #cc02; }
.g2-foot { grid-area: g2-foot; font-size: var(--font-size-small); background-color: #6062; }

form {
display: flex;
flex-wrap: wrap;        /* enable line wrap */
align-items: flex-start;    /* adjust height */
}

.flex-break {           /* cause line wrap in flex display */
flex-basis: 100%;
height: 0;
}
}
h1 {
font-family: sans-serif;
font-weight: bold;
font-size: large;
}

fieldset {
border-radius: 1rem;
max-width: fit-content;
padding: 1rem;
margin: 0.5rem;
}

legend {
font-weight: bold;
font-family: sans-serif;
padding-left: 0.75ex;
padding-right: 0.75ex;
}< /code>



Test





Test
Text...

A
B

C
D

E

Если вы замените br на Span , строка продолжается на следующей.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... tainer-but