Как сделать чтобы все эелементы были такой же ширины как самый длинный из них?

Question

[Петр Сергеев]

Сейчас это работает, но только если элементы выстроены в колонку, - самый большой элемент зеленый и остальные подстраиваются по его ширину.
Но как сделать чтобы эти элементы встали теперь в ряд?

Вот код https://codepen.io/Ron3485/pen/ExQdRqp

Comments

[imko]

Если ширина всего контейнера заранее известна, то либо флекс и детям ставить flex: 1 1 0; либо грид с auto-flow -

grid-auto-columns: 1fr;
  grid-auto-flow: column;

а если ширина по содержимому то я даже не представляю как это сделать)

[Ankhena]

Если не брать в расчет JS, то вот такой вариант:
элементы будут равной ширины до тех пора пока block влезает в родителя.
https://codepen.io/AnnaSummer/pen/vYdQJXg

[Петр Сергеев]

Ankhena, большое спасибо

Answer 1

[ProstoChel92]

.block {
    display: flex;
}
.block__item {
    /*стили*/
   flex: 1 1 33.33%;
}

Comments

[Петр Сергеев]

здесь получается немного по другому,- получается равная ширина для всех элементов, которая распространяется на 100% родителя. То есть в моем примере самый широкий блок это зеленый- его ширина вместе с паддингами составляет 76px, желтый и красный блок, несмотря на то что у них меньше контент так же взяли ширину самого широкого зеленого блока,- то есть тоже стали 76px в ширину.

Нужно только чтобы они теперь встали не в колонку, а в ряд. то есть не заполняли все 100% родителя, а в данной ституации были тоже все по 76px

Answer 2

[Sigar49]

Вот код:

body {
  background: #cdcdcd;
}

.block {
  /*ТУТ ЗАМЕНА*/
  display: flex;
  /*ТУТ ЗАМЕНА*/
  grid-template-columns: minmax(10px, max-content);
  gap: 10px;
}

.block__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.block__item--green {
  background: green;
}

.block__item--yeloow {
   background: yellow;
}

.block__item--red {
   background: red;
}

Comments

[Петр Сергеев]

Не работает, - сейчас получается, что ширина каждого из элементов своя

[Sigar49]

Я понял. Вот код:

body {
  background: #cdcdcd;
}

.block {
  display: flex;
  grid-template-columns: minmax(10px, max-content);
  gap: 10px;
}

.block__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.block__item--green {
  background: green;
  width: 40px;
}

.block__item--yeloow {
   background: yellow;
   width: 40px;
}

.block__item--red {
   background: red;
   width: 40px;
}

[Антон Антон]

Sigar49, width: 40px <> width: max-content прям совсем

[Sigar49]

??

[Ankhena]

Sigar49, вы бы хоть пробовали, что предлагаете.

[Sigar49]

Ankhena, Да

[Ankhena]

Sigar49, что да, если результат не тот?

[Sigar49]

Ankhena, Прошу вас перейти в коде пен (Петра Сергеева) https://codepen.io/Ron3485/pen/ExQdRqp.
И вместо СSS вставьте это.

body {
  background: #cdcdcd;
}

.block {
  display: flex;
  grid-template-columns: minmax(10px, max-content);
  gap: 10px;
}

.block__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.block__item--green {
  background: green;
  width: 40px;
}

.block__item--yeloow {
   background: yellow;
   width: 40px;
}

.block__item--red {
   background: red;
   width: 40px;
}

[Антон Антон]

Sigar49, Ну а вы после этого вставьте в html вот это:

<div class="block">
  <div class="block__item block__item--green">134566ываываываывапывапывапывапы6</div>
  <div class="block__item block__item--yeloow">34</div>
  <div class="block__item block__item--red">44456</div>
</div>

[Ankhena]

Sigar49, перешла. Попробовала. Ни одна из строк не попала.
https://codepen.io/AnnaSummer/pen/NWyEjwK

[Sigar49]

Ну width поставьте больше

[Ankhena]

Sigar49, ладно, я надеюсь, вы сами уже поняли несостоятельность варианта.

Answer 3

[CHG44]

Ну... вероятно, добавить больше колонок.