Как заставить flexbox включать отступы в расчеты?

Ниже два ряда.

Первый ряд это две вещи наflex 1 и один вflex 2.

Второй ряд это две вещи наflex 1.

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

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

ВОПРОС

<, p> Как заставить flex box включать отступы в свои вычисления, чтобы блоки в примере выстраивались правильно?

.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>

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

В вашем коде отступыявляется включены в расчеты.

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

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

flex-grow имущество

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

flex-grow: 1flex-shrink: 1flex-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.

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

Flex-Grow не оценивает Flex-элементы, как ожидалосьКак именно flex-grow работает с flexbox?
Решение Вопроса

Задавать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>

Эта проблема:

Расчет делается безpadding, Так; добавлениеpadding кflex элемент не дает вам ожидаемую ширинуспекуляция.

Конкретная статья

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

ширина содержащего блока гибкого контейнера минус поле, граница и отступ гибкого контейнера в горизонтальном измерениибесконечен в вертикальном измерении

Почему не рассчитывается отступ? Это то, что спецификация хочет.

Определить доступныеmain а такжеcross пространство дляflex Предметы, Для каждого измерения, если это измерениеflex containerКонтентное поле имеет определенный размер, используйте его; если это измерениеflex container измеряется подmin или жеmax-content ограничение, доступное пространство в этом измерении является этим ограничением; иначе,вычтите поле, границу и отступ гибкого контейнера из пространства, доступного гибкому контейнеру в этом измерении, и используйте это значение. Это может привести к бесконечному значению.

Если вычестьpadding а такжеmargin из размера элемента вы получите:

1А + 1В = 2А

Однако после того, как вы это сделали, к элементу был добавлен отступ. Чем больше элементов, тем больше отступов. Это не рассчитывается по ширине, в результате чего ваше утверждение будет ложным.

 43Tesseracts07 янв. 2018 г., 08:05
Это также не помогает, когда вам нужны отступы для границ. Я надеялсяbox-sizing: border box; помог бы, но не такая удача ...
 Dinh Tran10 июл. 2017 г., 10:55
проблема с использованием margin вместо padding заключается в том, что при наведении указателя мыши на поле margin оно не будет учитываться при наведении указателя мыши на этот элемент.
 Michael_B08 мар. 2018 г., 16:51
Это не совсем понятно: выделенный вами раздел спецификаций гласит:«... вычесть отступы, границы и отступы гибкого контейнера из доступного пространства ...» Но набивка не на гибком контейнере. Это на гибких предметах. (Вложенный гибкий контейнер не имеет отношения к проблеме.) Поэтому я не уверен, что эти выдержки применимы.
 DreamTeK14 июн. 2016 г., 09:34
Это не только решило мою проблему, но и помогло понять гибкость. Спасибо.

я, например: (в этом случае 30px правое заполнение)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}

 DreamTeK10 окт. 2018 г., 16:01
Это много дополнительной наценки за каждый элемент. Я не думаю, что это хорошее решение.

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