Как получить flexbox для включения прокладки в вычислениях?

Ниже представлены две строки.

  • Первая строка - это два элемента в flex 1 и один в flex 2.

  • Вторая строка - это два элемента в flex 1.

Согласно спецификации 1A + 1B = 2A

Но когда в вычисление включено дополнение, сумма неверна, как вы можете видеть в примере ниже.

Вопрос

Как заставить Flex-поле включить дополнение в его вычисление, чтобы поля в примере правильно выстроились правильно?

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Решение:

Задайте margin дочернего элемента вместо padding в элементе flex.

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

Ответ 2

Как получить flexbox для включения прокладки в вычислениях?

В вашем коде добавление включено в вычисления.

Согласно спецификации 1A + 1B = 2A

Я не верю, что это правильно. Может быть, ссылка на ссылку для объяснения.

Свойство flex-grow

Когда вы применяете flex: 1 к элементу, вы используете свойство стенограммы flex, чтобы сказать следующее:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex-grow указывает гибкому элементу, чтобы использовать свободное пространство в контейнере.

Вот ваш код:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

В первой строке padding-right: 10px применяется к элементам три.

Во второй строке padding-right: 10px применяется к двум гибким элементам.

Следовательно, в первой строке 10px меньше свободного места для распространения. Это нарушает выравнивание сетки.

Для распределения пространства (например, вы хотите, чтобы элемент занимал оставшуюся высоту или ширину контейнера), используйте flex-grow.

Для точного определения размера элемента используйте flex-basis, width или height.

Вот еще информация: