Flexbox, столбец ведет себя иначе, чем строка
Похоже, что flex-direction: column вообще не работает. С другой стороны, flex-direction: row; - отлично работает. Вам нужно только заменить «столбец» на «строку», чтобы увидеть его в приведенном ниже коде:
.flex-container {
display: flex;
flex-direction: column;
height: 400px;
background-color: DodgerBlue;
}
.flex-container>div {
flex-grow: 1;
background-color: #f1f1f1;
margin: 10px;
line-height: 75px;
}<h1>Flexible Boxes</h1>
<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>В режиме столбца display: flex ведет себя как обычный display: block, а его дочерние элементы выходят из него вместо того, чтобы сжиматься, чтобы соответствовать высоте или max-height: 400px;
Это почему? А почему работает только в "строчном" режиме?
добавить минимальную высоту: 0
Это действительно так. Поместите это в ответ, чтобы я мог принять это.
лучше прочтите дубликат, чтобы понять;) не принимайте просто исправления без объяснения причин, иначе вы будете сталкиваться с одной и той же проблемой снова и снова
?? вы устанавливаете статическую высоту + высоту строки от 75 пикселей до 6 элементов + поля. Это уже намного больше, чем начальные 400 пикселей. он все равно будет переполняться. line-height и margins не сжимаются. Если речь идет о вертикальном центрировании также текста, тогда flexbox может быть инбрицирован, а трюк с высотой строки может быть отброшен * .... codepen.io/gc-nomade/pen/KBwqdV
@ G-Cyr, вы правы, но высота может уменьшиться, если мы правильно установим вещи (добавив min-height: 0) ... на самом деле проблема в том, что элемент не может уменьшиться за пределы размера содержимого, определенного line-height [конечно это не значит, что это хорошая идея, но это объясняет поведение]
@TemaniAfif действительно может уменьшить высоту, но с помощью функции flex-grow: 1; нет даже необходимости устанавливать высоту, независимо от количества элементов, которые он полностью заполнит родительский элемент гибкости .. пока контент сам по себе не станет слишком большим;) Я думаю, вы неправильно поняли точку моего комментария, где я не упомянул набор высота дочерних элементов, а их высота зависит от содержимого и высоты строки. Мне было интересно, почему line-height? вертикальное центрирование?
Ответы 1
Удалите высоту строки или добавьте overflow: auto в контейнер. В основном это жестко запрограммированная высота каждого дочернего элемента, создающего переполненный контейнер.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column;
height: 400px;
background-color: DodgerBlue;
}
.flex-container>div {
flex-grow: 1;
background-color: #f1f1f1;
margin: 10px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
высота строки, вызывающая проблему. Удалите высоту строки