CODEWITHSUNDEEP
cssflexbox
Xarcell
Xarcell

Reputation: 2011

How Can I Control The Space-Between Flex Boxes?

I'm experimenting with the css property flexbox to make fluid grids. I noticed that when I use space-between, that the spaces are not consistent. They start off wide then get narrower. How can I make the gutters equal to 1rem in flexbox?

I tried using calc to reduce with by 1rem. That only stopped the gutter from getting narrower than 1rem, but allows it to start off wider than 1rem.

Any other technique I can try?

My Code:

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>

Here is the example problem: http://jsfiddle.net/xz4rbrgc/

Upvotes: 1

Views: 607

Answers (1)

zer00ne
zer00ne

Reputation: 44086

UPDATE

Here's an alternate: https://jsfiddle.net/zer00ne/x30boe1a/

This is a version with a flex column wrapped around the whole layout.

Using rem has it's merits but like flexbox, it still needs a little help from other properties because of certain requirements or circumstances.

This article covers a topic I believe is relevant to your project.

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

RELEVANT 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;
}

Take a look at this: https://jsfiddle.net/zer00ne/fqeapejg/ I think you want a constant 1rem between the boxes right?

Using box-sizing: border-box will enforce a common box modal. Flexbox does not include borders even though border-box is applied. I didn't really know what purpose that was for until now. If borders were not ignored by flexbox, then you'd get no way of using a constant measurement within the flex container. I'm not sure why rem varies and acts like em. Rem should stay constant since the root's font-size is unchanged. That's why I used 8px for the borders, since you want a constant 1rem distance between boxes (1rem = :root font-size = 16px/2 (each box) = 8px.

Btw, I see that you declared 16px for body. If your intention was to set 1rem = 16px, then it should be html { font-size: 16px; }. I didn't bother because it's a default for all the browsers AFAIK.

Relevant changes:

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>

Upvotes: 1

Related Questions