Вопрос:
При использовании flexbox для стилизации, если родительский контейнер установлен в display: flex, это приведет к тому, что <hr /> будет отображаться вертикально, а не горизонтально.
.container { display: flex; flex: 1; }<div class=’container’> <h2>Test</h2> <hr /> </div>Лучший ответ:
Используйте flex-grow: 1 или width: 100%, чтобы он увеличивался в соответствии с шириной родителя. Вероятно, вы захотите использовать это в сочетании с flex-wrap: wrap на .container, если вы планируете размещать больше гибких детей в .container
.container { display: flex; flex: 1; } hr { flex-grow: 1; /* width: 100%; */ /* or this */ }<div class=’container’> <hr> </div>Ответ №1
Причиной этого является то, что значение по умолчанию align-items равно stretch, поэтому hr получит ту же высоту, что и самый большой элемент в flex-container или в этом случае h2. И значение по умолчанию для justify-content равно flex-start, поэтому ширина hr равна 0.
Легкий способ исправить это – использовать flex-wrap: wrap для родительского элемента и flex: 0 0 100% на hr
.container { display: flex; flex-wrap: wrap; } hr { flex: 0 0 100%; }<div class=’container’> <h2>Test</h2> <hr> </div>
