Динамически гарантировать, что все элементы flexbox имеют одинаковую минимальную ширину, без использования flex-direction: column?

Обратите внимание: здесь, однако в чистом ответе css для контейнера используется flex-direction: column.

Кажется, ответ на исходный вопрос заключается в том, что flexbox не поддерживает это, однако мне также интересно, возможно ли это с помощью CSS Grid. Возможно, лучше задать новый вопрос ...

У меня есть контейнер flexbox с несколькими сотнями элементов в них, содержащих текст переменной длины, а для white-space установлено значение nowrap, чтобы гарантировать, что текст не переносится. Вот пример:

<div style="display:flex; flex-direction: row;">
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong label that's even longer</div>
    ...
    <div>And so on for a few hundred of these divs</div>
</div>

Существует ли набор параметров flexbox, который приведет к тому, что все элементы будут иметь ширину, равную ширине элементов с самым длинным содержимым? В данном случае это будет div:

    <div>Really really really looooooong label that's even longer</div>

Что я мог сделать, так это измерить длину вышеуказанного div и установить минимальную ширину для этой длины, но мне интересно, есть ли у flexbox способ сделать это автоматически? В настоящее время, как указывает @ M0ns1f в своем ответе, кажется, что единственный способ сделать это - установить minimum-width вручную или через javascript.


html css flexbox css-grid
person Ole    schedule 14.10.2017    source источник
comment
Возможный дубликат Все элементы должны иметь одинаковую ширину как самый широкий элемент   -  person yohohosilver    schedule 14.10.2017
comment
Нет, Flexbox не имеет свойства одинаковой ширины (или высоты) для нескольких столбцов или строк.   -  person Ason    schedule 14.10.2017
comment
Нет необходимости в новом вопросе, просто добавьте правку последней в вопросе, где вы говорите, что Flexbox не может без скрипта, а затем спросите, может ли CSS Grid это сделать.   -  person Ason    schedule 14.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

После комментария @Matt Weber это то, что вы должны сделать

var choices = document.querySelectorAll('div');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};

// write
for (i = 0; i < choices.length; ++i) {
    choices[i].style.minWidth = maxWidth + "px";
};
.contain{
 width:100% !important;
 min-width:100%;
 display:flex;
 flex-direction: row;
}
div.contain div {
 white-space: nowrap;
 margin: 0 5px;
}
<div class="contain" >
    <div>Short label</div>
    <div>Really really really looooooong label</div>
    <div>Really really really looooooong  looooooong looooooong label that's even longer</div>
    <div>And so on for a few hundred of these divs</div>
</div>

person M0ns1f    schedule 14.10.2017
comment
Интересно, но решение должно использовать flexbox. Кроме того, текст в элементах не должен переноситься, поскольку для свойства css whitespace css установлено значение nowrap - элементы внутри гибкого контейнера могут быть перенесены, но все они должны иметь одинаковую длину, и они могут находиться в одной строке, если они подходят, и все они имеют одинаковую минимальную ширину. - person Ole; 14.10.2017
comment
@Ole посмотри, я добавил flex-direction: column; - person M0ns1f; 14.10.2017
comment
flex-direction должен быть row таким, чтобы элементы можно было обернуть в контейнер. Я обновил вопрос, резюмируя дополнительные характеристики. - person Ole; 14.10.2017
comment
@Ole посмотри, я думаю, что добавление минимальной ширины - единственный вариант - person M0ns1f; 14.10.2017
comment
Думаю, вы правы - процент использования интересен - когда я запускаю код, отображается только short label ...? - person Ole; 14.10.2017
comment
нет переполнения-x все элементы находятся в одной строке и принимают наибольшую ширину div - person M0ns1f; 14.10.2017
comment
@Ole Вам нужно добавить flex-wrap: wrap в контейнер, иначе они выровняются по горизонтали - person Ason; 14.10.2017