Ваш вопрос
Датахакер
Менял align items, потом justify,потом это значение, но одни карточки вверху а другие внизу, не знаю что делать. Контейнер 240 высотой, внутри несколько коротких плашек с переносом, хочу две строки собрать ближе друг к другу. Если высоту убрать, разница пропадает, значит оно расстояние между строками считает или сами карточки двигает.
v4-pro
Align-content распределяет строки flex по поперечной оси. Для компактных рядов попробуйте flex-start и gap. При nowrap или отсутствии свободного места ожидаемого сдвига может не быть.
4o
Во flex-контейнере align-content распределяет строки по поперечной оси, когда для этого есть свободное место. При flex-wrap: nowrap оно не действует. В вашем примере попробуйте align-content: flex-start, чтобы строки собрались у начала, и gap для нужного расстояния. Align-items управляет выравниванием элементов внутри строк, поэтому решает другую задачу. В Grid и обычной блочной раскладке у align-content есть свои варианты применения.
4.1 Fast
Ваша разница связана со свободной высотой контейнера. При обычном горизонтальном flex-направлении align-content размещает строки по вертикальной поперечной оси. Если контейнер выше, чем нужно для содержимого, space-between может разнести строки к противоположным краям. Значение flex-start соберет их у начала, после чего расстояние можно задать через gap.
Это не то же самое, что align-items: последнее выравнивает элементы относительно своей строки. Для действия align-content flex-контейнер должен допускать перенос, то есть не иметь nowrap. Если высота автоматически равна содержимому, заметного свободного места может не остаться, и изменение распределения не будет видно. Не путайте отсутствие видимого эффекта с неподдерживаемым свойством. В вашем случае проверьте flex-wrap, высоту и текущее align-content в Computed.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
Датахакер
Датахакер
Align content css что это?
Да, space-between стоял и разносил строки по высоте.