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

<p>ниже два ряда.</p><ul> <li><p><strong> первая строка </strong>это два элемента в <code>flex 1</code> и один в <code>flex 2</code>.</p></li> <li><p><strong> вторая строка </strong>это два элемента в <code>flex 1</code>.</p></li> </ul><p>согласно спецификации<strong> 1a + 1b = 2a </strong></p><p>но когда<strong> заполнение </strong>включено в расчет, сумма неверна, как вы можете видеть в примере ниже.</p><hr><p><strong>вопрос</strong></p><p>как заставить flex box включать в свой расчет отступы, чтобы поля в примере выстроились правильно?</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.row{ display:flex; } .item{ display:flex; flex:1; flex-direction:column; padding:0 10px 10px 0; } .item > div{ background:#7ae; } .flx2{ flex:2; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p>решение:</p><p>установите <code>margin</code> для дочернего элемента вместо <code>padding</code> для вашего элемента <code>flex</code>.</p><p><div class="snippet" data-lang="js" data-hide="true" data-console="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.row{ display:flex; } .item{ display:flex; flex:1; flex-direction:column; } .item > div{ background:#7ae; margin:0 10px 10px 0; } .flx2{ flex:2; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><hr><p>эта проблема:</p><p>расчет выполняется без <code>padding</code>. так; добавление <code>padding</code> к элементу <code>flex</code> не дает ожидаемой ширины <a href="https://www.w3.org/tr/css-flexbox-1/">spec</a> .</p><p> <a href="https://www.w3.org/tr/css-flexbox-1/#line-sizing">конкретная статья</a> </p><blockquote> <p>например, доступное пространство для гибкого элемента в плавающем гибком контейнере автоматического размера:</p> <ul> <li>ширина содержащего блока гибкого контейнера минус поле, граница и отступ гибкого контейнера в горизонтальном измерении</li> <li>бесконечен в вертикальном измерении</li> </ul> </blockquote><p>почему не рассчитывается отступ? это то, что спецификация хочет.</p><blockquote> <p><em>определить доступное пространство <code>main</code> и <code>cross</code> для элементов <code>flex</code></em>. для каждого измерения, если это измерение поля содержимого <code>flex container</code> определенного размера, используйте его; если это измерение <code>flex container</code> измеряется в соответствии с ограничением <code>min</code> или <code>max-content</code>, доступным пространством в этом измерении является это ограничение; в противном случае <strong>вычтите поле, границу и отступ гибкого контейнера из пространства, доступного для гибкого контейнера в этом измерении, и используйте это значение</strong>. <em>это может привести к бесконечному значению.</em></p> </blockquote><p>если вы вычтете <code>padding</code> и <code>margin</code> из размера элемента, вы получите:</p><p><strong>a1 + a2 = b1</strong></p><p>однако после того, как вы это сделали, к элементу был добавлен отступ. чем больше элементов, тем больше отступов. это не рассчитывается по ширине, в результате чего ваше утверждение будет ложным.</p>

<blockquote> <p>как заставить flexbox включать отступы в расчеты?</p> </blockquote><p>в вашем коде padding <em>is</em> включен в вычисления.</p><blockquote> <p>согласно спецификации <strong>1a + 1b = 2a</strong></p> </blockquote><p>я не верю, что это правильно. может быть, предоставить ссылку на ссылку для объяснения.</p><hr><h2>свойство <code>flex-grow</code></h2><p>когда вы применяете <code>flex: 1</code> к элементу, вы используете сокращенное свойство <code>flex</code>, чтобы сказать это:</p><ul> <li><code>flex-grow: 1</code></li> <li><code>flex-shrink: 1</code></li> <li><code>flex-basis: 0</code></li> </ul><p><code>flex-grow</code> указывает гибкому элементу использовать свободное место в контейнере.</p><p>вот ваш код:</p><pre><code>.item { display: flex; flex: 1; flex-direction: column; padding: 0 10px 10px 0; } </code></pre><p>в первой строке <code>padding-right: 10px</code> применяется к <strong>three</strong> flex элементам.</p><p>во второй строке <code>padding-right: 10px</code> применяется к <strong>two</strong> flex элементам.</p><p>следовательно, в первом ряду свободного места на 10px меньше для распределения. это нарушает выравнивание сетки.</p><p>для распределения пространства (например, вы хотите, чтобы элемент занимал оставшуюся высоту или ширину контейнера), используйте <code>flex-grow</code>.</p><p>для точного определения размера гибкого элемента используйте <code>flex-basis</code>, <code>width</code> или <code>height</code>.</p><p>вот еще немного информации:</p><ul> <li> <a href="https://stackoverflow.com/q/34644807/3597276">flex-grow, не определяющий размер элементов flex, как и ожидалось</a> </li> <li> <a href="https://stackoverflow.com/q/37617872/3597276">как именно flex-grow работает с flexbox?</a> </li> </ul>

<p>вы можете использовать плавающие элементы псевдоблока вместо заполнения, например: (в этом случае 30px правое заполнение)</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.item:after { content: ''; display: block; float: right; width: 30px; height: 100%; }</code></pre> </div> </div> </p>