Как сделать ширину Flex Grid относительно наибольшей ширины дочернего элемента?

Question

У меня есть что-то вроде этого:

.wrapper {
  display: flex;
  width: 300px;
}

.content {
  flex: auto;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 25%;
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}

<div class='wrapper'>
  <div class='content'>Content</div>
  <div class='row'>
    <div class='col'>aa</div>
    <div class='col'>aaaa</div>
    <div class='col'>aaaaaa</div>
    <div class='col'>aaaaaaaa</div>
  </div>
</div>

Я не могу понять, как:

• Ширина элемента .row рассчитывается
• Ширина .col элементов рассчитывается
• Почему некоторые материалы переполняют окно, а некоторые нет

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

Я видел, что я мог бы сделать это с display: grid и grid-template-columns: 1fr 1fr 1fr 1fr, но тогда как сделать его отзывчивым и насколько хорошо он поддерживается?

Answer 1

Чтобы ответить на 3 первых вопроса, вам необходимо удалить width:25%, чтобы получить следующее:

.wrapper {
  display: flex;
  width: 300px;
}

.content {
  flex: auto;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}

<div class='wrapper'>
  <div class='content'>Content</div>
  <div class='row'>
    <div class='col'>aa</div>
    <div class='col'>aaaa</div>
    <div class='col'>aaaaaa</div>
    <div class='col'>aaaaaaaa</div>
  </div>
</div>

Мы не определили ширину, поэтому каждый col будет соответствовать своему содержимому, а ширина строки будет равна сумме всех col.

Теперь, поскольку у нас есть ширина строки, определенная на основе содержимого, она не изменится и будет использоваться в качестве ссылки для процента.Использование 25% для col означает, что каждый получит 25% ранее определенной ширины, и у нас будет логическое переполнение, поскольку содержимое внутри каждого col не одинаково.

.wrapper {
  display: flex;
  width: 300px;
}

.content {
  flex: auto;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}
.width .col {
  width:25%;
}

<div class='wrapper'>
  <div class='content'>before width</div>
  <div class='row'>
    <div class='col'>aa</div>
    <div class='col'>aaaa</div>
    <div class='col'>aaaaaa</div>
    <div class='col'>aaaaaaaa</div>
  </div>
</div>
<div class='wrapper'>
  <div class='content'>after width</div>
  <div class='row width'>
    <div class='col'>aa</div>
    <div class='col'>aaaa</div>
    <div class='col'>aaaaaa</div>
    <div class='col'>aaaaaaaa</div>
  </div>
</div>

---

Чтобы получить то, что вы хотите, я думаю, что 1fr сетки CSS - это путь (как вы уже заметили).На самом деле CSS-сетка хорошо поддерживается.У вас просто будут проблемы с IE, и вы можете перейти по этой ссылке, чтобы увидеть известные ошибки: https://caniuse.com/#feat=css-grid

---

Чтобы сделать его отзывчивым, вы можете рассмотреть медиазапрос, чтобы переключиться на макет столбца на маленькомэкраны:

.wrapper {
  display: flex;
  width: 300px;
}
.row {
  display: grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
}

.col {
  padding: 5px;
  border: 1px solid black;
  box-sizing: border-box;
}

@media all and (max-width:500px) {
.row {
  grid-auto-flow:row;
}
}

<div class='wrapper'>
  <div class='content'>Content</div>
  <div class='row'>
    <div class='col'>aa</div>
    <div class='col'>aaaa</div>
    <div class='col'>aaaaaa</div>
    <div class='col'>aaaaaaaa</div>
  </div>
</div>