Как я могу управлять пространственными ячейками?

Question

Я экспериментирую с css-собственностью flexbox для создания жидкостных сеток. Я заметил, что когда я использую space-between, пробелы несовместимы. Они начинаются широко, а затем сужаются. Как я могу сделать желобы равными 1rem в flexbox?

Я попытался использовать calc, чтобы уменьшить с помощью 1rem. Это только остановило сточную канаву, чтобы она становилась уже, чем 1rem, но позволяет ей начинать шире, чем 1rem.

Любая другая техника, которую я могу попробовать?

Мой код:

body { 
 
    font-size: 16px; 
 
} 
 
.bg-blc-2 { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.txt-ctr { 
 
    text-align: center; 
 
} 
 
.cls-1, 
 
.cls-2, 
 
.cls-3, 
 
.cls-4, 
 
.cls-5, 
 
.cls-6, 
 
.cls-7, 
 
.cls-8, 
 
.cls-9, 
 
.cls-10, 
 
.cls-11, 
 
.cls-12 { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    margin: 0 0 1rem 0; 
 
} 
 
.cls-1 > * { 
 
    flex: 1; 
 
} 
 
.cls-2 > * { 
 
    flex-basis: calc(50% - 1rem); 
 
} 
 
.cls-3 > * { 
 
    flex-basis: calc(33.33% - 1rem); 
 
} 
 
.cls-4 > * { 
 
    flex-basis: calc(25% - 1rem); 
 
} 
 
.cls-5 > * { 
 
    flex-basis: calc(20% - 1rem); 
 
} 
 
.cls-6 > * { 
 
    flex-basis: calc(16.6667% - 1rem); 
 
} 
 
.cls-7 > * { 
 
    flex-basis: calc(14.28% - 1rem); 
 
} 
 
.cls-8 > * { 
 
    flex-basis: calc(12.5% - 1rem); 
 
} 
 
.cls-9 > * { 
 
    flex-basis: calc(11.11% - 1rem); 
 
} 
 
.cls-10 > * { 
 
    flex-basis: calc(10% - 1rem); 
 
} 
 
.cls-11 > * { 
 
    flex-basis: calc(9.09% - 1rem); 
 
} 
 
.cls-12 > * { 
 
    flex-basis: calc(8.33% - 1rem); 
 
}

<div class="cls-1"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
</div> 
 
<div class="cls-2"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
</div> 
 
<div class="cls-3"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
</div> 
 
<div class="cls-4"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
</div> 
 
<div class="cls-5"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
</div> 
 
<div class="cls-6"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
</div> 
 
<div class="cls-7"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
</div> 
 
<div class="cls-8"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
</div> 
 
<div class="cls-9"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
</div> 
 
<div class="cls-10"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
</div> 
 
<div class="cls-11"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
    <div class="bg-blc-2 txt-ctr">11</div> 
 
</div> 
 
<div class="cls-12"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
    <div class="bg-blc-2 txt-ctr">11</div> 
 
    <div class="bg-blc-2 txt-ctr">12</div> 
 
</div>

Вот пример проблемы: http://jsfiddle.net/xz4rbrgc/

Answer 1

UPDATE

Вот альтернативный: https://jsfiddle.net/zer00ne/x30boe1a/

Это версия с гибкой колонкой, обернутой вокруг всего макета.

Использование rem имеет свои достоинства, но, как и flexbox, по-прежнему требуется небольшая помощь от других свойств из-за определенных требований или обстоятельств.

В этой статье рассматривается тема, которая, как я считаю, имеет отношение к вашему проекту.

https://css-tricks.com/rems-ems/

Применимое CSS

html, body { 
    box-sizing: border-box; 
    font-size: 16px; 
    height: 100vh; 
    width: 100vw; 
    overflow: hidden; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
.fcol-0 { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    justify-content: space-between; 
    align-content: space-between; 
    align-items: space-between; 
    width: 100%; 
    height: 100%; 
} 
div.bdr-lt { 
    border-left: 0; 
} 
div.bdr-rt { 
    border-right: 0; 
} 
div[class^="cls"] { 
    border-top: 8px solid blue; 
    border-bottom: 8px solid blue; 
} 

---

Взгляните на это: https://jsfiddle.net/zer00ne/fqeapejg/ Я думаю, что вы хотите постоянную 1rem между коробками верно?

Использование box-sizing: border-box обеспечит общий модульный режим. Flexbox не включает границы, хотя применяется border-box. Я действительно не знал, какая цель была до сих пор. Если границы не были проигнорированы flexbox, то вы не сможете использовать постоянное измерение внутри контейнера flex. Я не уверен, почему брод меняется и действует как em. Rem должен оставаться постоянным, так как размер шрифта root не изменяется. Вот почему я использовал 8px для границ, так как вы хотите иметь постоянное расстояние между ямами (1rem =: root font-size = 16px/2 (каждый ящик) = 8px.

Кстати, я вижу, что вы заявили 16px для . тело Если ваше намерение было установить 1rem = 16px, то она должна быть html { font-size: 16px; } я не стал, потому что это по умолчанию для всех браузеров AFAIK

Соответствующие изменения:..

body { 
    box-sizing: border-box; 
} 
div[class^="bg"] { 
    border-left: 8px solid red; 
    border-right: 8px solid red; 
} 

body { 
 
    box-sizing: border-box; 
 
    font-size: 16px; 
 
} 
 
.bg-blc-2 { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.txt-ctr { 
 
    text-align: center; 
 
} 
 
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12 { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    margin: 0 0 1rem 0 
 
} 
 
div[class^="bg"] { 
 
    border-left: 8px solid red; 
 
    border-right: 8px solid red; 
 
} 
 

 
.cls-1 > * { 
 
    flex: 1; 
 
} 
 
.cls-2 > * { 
 
    flex: 0 1 calc(50%); 
 
} 
 
.cls-3 > * { 
 
    flex: 0 1 calc(33.33%); 
 
} 
 
.cls-4 > * { 
 
    flex: 0 1 calc(25%); 
 
} 
 
.cls-5 > * { 
 
    flex: 0 1 calc(20%); 
 
} 
 
.cls-6 > * { 
 
    flex: 0 1 calc(16.6667%); 
 
} 
 
.cls-7 > * { 
 
    flex: 0 1 calc(14.28%); 
 
} 
 
.cls-8 > * { 
 
    flex: 0 1 calc(12.5%); 
 
} 
 
.cls-9 > * { 
 
    flex: 0 1 calc(11.11%); 
 
} 
 
.cls-10 > * { 
 
    flex: 0 1 calc(10%); 
 
} 
 
.cls-11 > * { 
 
    flex: 0 1 calc(9.09%); 
 
} 
 
.cls-12 > * { 
 
    flex: 0 1 calc(8.33%); 
 
}

<div class="cls-1"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
</div> 
 
<div class="cls-2"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
</div> 
 
<div class="cls-3"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
</div> 
 
<div class="cls-4"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
</div> 
 
<div class="cls-5"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
</div> 
 
<div class="cls-6"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
</div> 
 
<div class="cls-7"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
</div> 
 
<div class="cls-8"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
</div> 
 
<div class="cls-9"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
</div> 
 
<div class="cls-10"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
</div> 
 
<div class="cls-11"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
    <div class="bg-blc-2 txt-ctr">11</div> 
 
</div> 
 
<div class="cls-12"> 
 
    <div class="bg-blc-2 txt-ctr">1</div> 
 
    <div class="bg-blc-2 txt-ctr">2</div> 
 
    <div class="bg-blc-2 txt-ctr">3</div> 
 
    <div class="bg-blc-2 txt-ctr">4</div> 
 
    <div class="bg-blc-2 txt-ctr">5</div> 
 
    <div class="bg-blc-2 txt-ctr">6</div> 
 
    <div class="bg-blc-2 txt-ctr">7</div> 
 
    <div class="bg-blc-2 txt-ctr">8</div> 
 
    <div class="bg-blc-2 txt-ctr">9</div> 
 
    <div class="bg-blc-2 txt-ctr">10</div> 
 
    <div class="bg-blc-2 txt-ctr">11</div> 
 
    <div class="bg-blc-2 txt-ctr">12</div> 
 
</div>