сломать этот механизм?

читал много уроков по CSS flex box и CSS сеткам, но, честно говоря, я просто не могу понять, как сделать эту простую (?) Вещь.

Все, что я хочу, это чтобы элементы в контейнере были такими же широкими, как и самый широкий элемент.

Я не хочу, чтобы они заполняли всю ширину контейнера, просто все растут до максимальной ширины. Можно ли это сделать с помощью CSS?

Рассмотрим этот HTML:

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

Это производит что-то вроде этого:

Я хочу что-то вроде этого, где они имеют ширину самой широкой кнопки:

Я не хочу, чтобы они просто растягивались, чтобы заполнить ширину страницы:

Можно ли это сделать? Если так, что будет CSS для вышеупомянутого HTML?

 J o28 дек. 2017 г., 09:56
Это супер просто, используя CSS какэто
 Rajeev Ranjan28 дек. 2017 г., 08:26
только CSS нет. С JS да, это возможно.
 mystrdat21 авг. 2018 г., 13:03
@Jo Он специально просит, чтобы предметы не растягивались на ширину контейнера. Насколько я знаю, flexbox не может этого сделать.

Ответы на вопрос(2)

Решение Вопроса

Вот простое решение:

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

Вот как это работает:

Grid Layout предоставляет блок для определения гибкой длины в сеточном контейнере. Этоfr Блок. Он предназначен для распределения свободного пространства в контейнере (и несколько аналогиченflex-grow).

Однако спецификация Grid обеспечивает особенно уникальное поведение, когда ширина / высота контейнера является динамической (например,display: inline-grid, в этом случае).

В таких случаяхfr блок будет вычислятьmax-content каждого элемента сетки. Затем он примет максимальное найденное значение и будет использовать его как1fr длина для всех предметов на треке.

Это приводит к тому, что элементы сетки имеют общую ширину самого широкого элемента в строке.

Странно, но это правда.

Это также, почему макет сСтроки равной высоты возможны с помощью Grid (но не flexbox).

Вот соответствующий раздел в спецификации:

7.2.3. Гибкие длины:fr единица измерения

...

Когда доступное пространство бесконечно (что происходит, когда ширина или высота контейнера сетки неопределенна), flex-size (fr) размер дорожек сетки соответствует их содержанию при сохранении соответствующих пропорций.

Используемый размер каждой дорожки сетки гибкого размера вычисляется путем определенияmax-content размер каждой дорожки сетки гибкого размера и деление этого размера на соответствующий коэффициент гибкости для определения «гипотетического1fr размер".

Максимум тех используется как разрешенный1fr length (доля изгиба), которая затем умножается на коэффициент изгиба каждой дорожки сетки, чтобы определить ее окончательный размер.

 fgblomqvist26 окт. 2018 г., 20:33
Работает очень хорошо и поддерживается во всех основных браузерах. Мне интересно, есть ли способ, чтобы это работало динамически? Как, не зная, сколько столбцов есть.

работающее с любым количеством кнопок:

div.container {
  display: inline-grid;
  grid-auto-columns: 1fr;
}

div.container button {
  grid-row: 1;
}
 mystrdat21 авг. 2018 г., 13:59
Почемуposition: absolute на.container сломать этот механизм?

Ваш ответ на вопрос