У меня есть 2 деления бок о бок в flexbox. Правая рука всегда должна быть одинаковой ширины, и я хочу, чтобы левая рука просто занимала оставшееся пространство. Но это не будет, если я специально не установлю его ширину.
Таким образом, на данный момент он установлен на 96%, что выглядит нормально, пока вы действительно не нажмете на экран - тогда правый div немного лишится места, которое ему нужно.
Я думаю, я мог бы оставить все как есть, но это не так - как будто должен быть способ сказать:
правильный всегда один и тот же; Вы слева - вы получаете все, что осталось
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>
flex-grow: 1
не имело таких же эффектов, какflex: 1
. Может быть, вы знаете, почему это отличается? (Я исправил свою проблему с последним,flex-grow: 1
этомflex-basis
свойство остаетсяauto
равным значению по умолчанию. Приflex: 1
этомflex-basis
свойство изменяется на0
. Смотрите мой ответ здесь для подробного обзора: stackoverflow.com/q/43520932/3597276 @WhGandalfПо сути, я пытался заставить свой код иметь среднюю секцию в «строке» для автоматической настройки на содержимое с обеих сторон (в моем случае - разделитель пунктирной линии). Как предложил @Michael_B, ключ используется
display:flex
в контейнере строк и, по крайней мере, должен убедиться, что ваш средний контейнер в строке имеетflex-grow
значение как минимум на 1 больше, чем внешние контейнеры (если к внешним контейнерам не применены какие-либоflex-grow
свойства, средний контейнер нужно только 1 дляflex-grow
).Вот фотография того, что я пытался сделать, и пример кода для решения.
Изменить: Пунктирная нижняя граница, вероятно, будет выглядеть странно в зависимости от того, как ваш браузер отображает ее. Я лично рекомендовал бы использовать черный кружок SVG в качестве повторяющегося фонового изображения, надлежащего размера и расположенного в нижней части среднего контейнера. Я добавлю это альтернативное решение, когда у меня будет время.
источник