Как подогнать ширину блока внутри flex под контент?
Столкнулся с проблемой, не могу понять как решить, ширина блока внутри flex растягивается не зависимо от конвента.
На скрине видно, что первый блок слишком широкий и не сужается из-за того что там текст в две строки, как сделать, чтобы блок был не длиннее первой длинной строки?
Вот пример того, что хочу получить:
При этом не задавая фиксированную ширину блока.
Установка тега<br>перед "в приложении" решает эту проблему, но это получается не адаптивно, так как перенос на мобильной версии или на других разрешениях экрана в других местах
snippet
Дополнительно:
Немножко вам может помочь
flex-basis: 0; в сочетании с flex-grow: 1;
При некоторых раскладах посимпатичнее будет с text-wrap: balance, но пока без Safari (но и ничего не сломает)
А так, это особенности текста. (br, js)
p.s. уже нет смысла в использовании костыля с отрицательными margin для флекс-контейнера. Прекрасно работает gap
Ответы:
задать ширину логично же
- таких блоков очень много и они должны подстраиваться под контент, фиксированную ширину я задать не могу, только если высчитывать ее через js для каждого блока, но это мне кажется чем-то не логичным.
Я хочу чтобы ширина подстраивалась под контент блока
- установка тега <br> перед "в приложении" решает эту проблему, но это получается не адаптивно, так как перенос на мобильной версии или на других разрешениях экрана в других местах
как сделать, чтобы блок был не длиннее первой длинной строки?
никак, т.к. браузер не умеет уменьшать размер блока после его переполнения и переноса текста на несколько строк
- может тогда смотреть в сторону увеличения размеров блока, например задать max-width: min-content и затем увеличивать, как-то сложно получается
- Вячеслав Яшников, не особо поможет, т.к. блок будет ограничен длиной наибольшего слова
полностью динамическое решение средствами css невозможно из-за того как работает layout в браузерах
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы подогнать ширину блока внутри flex под контент, можно воспользоваться свойством flex-grow.
Например, если у вас есть контейнер с flex-раскладкой и вы хотите, чтобы один из блоков занимал оставшееся пространство в зависимости от содержимого, вы можете установить flex-grow для этого блока.
Пример на PHP:
<div> <div style="flex: 1">Блок 1</div> <div style="flex-grow: 1">Блок 2</div> </div>
В этом примере блок 1 будет занимать только необходимое пространство для своего содержимого, а блок 2 будет занимать все оставшееся пространство. Таким образом, ширина блока 2 будет подогнана под его контент.
Также можно использовать свойство flex-shrink, чтобы указать, насколько блок может уменьшиться, если содержимое не помещается в блоке. Например:
<div> <div style="flex: 1">Блок 1</div> <div style="flex-grow: 1;flex-shrink: 1">Блок 2</div> </div>
В этом примере блок 2 будет уменьшаться в размере, если его содержимое не помещается в блоке, но не более чем на 1. Таким образом, содержимое будет отображаться полностью, и ширина блока будет подогнана под контент.
Надеюсь, это поможет вам подогнать ширину блока внутри flex под контент. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.