How To Size Flex-items Without Percentages?

I am trying to create a flexbox-based grid, with the content being 2/3 width and the side bar the remaining 1/3. I have used percentages for the width in each col, which unfortun

Solution 1:

Consider using the flex-grow property for sizing flex items. This property tells flex items what amount of free space in the container they should absorb.

Here are some examples of how flex-grow distributes space in a row:

.container:nth-child(1) > .box { flex-grow: 1;  background-color: lightgreen; }
.container:nth-child(1) > .box:last-child { background-color: lightpink; }
.container:nth-child(2) > .box:nth-child(1) { flex-grow: 3; background-color: aqua; }
.container:nth-child(2) > .box:nth-child(2) { flex-grow: 7; background-color: orange; }
.container:nth-child(2) > .box:nth-child(3) { flex-grow: 1;  background-color: orangered;}
.container:nth-child(3) > .box:nth-child(1) { flex-grow: 10; background-color: yellow; }
.container:nth-child(3) > .box:nth-child(2) { flex-grow: 5; background-color: lightgreen; }
.container:nth-child(3) > .box:nth-child(3) { flex-grow: 1; background-color: tan; }
.container:nth-child(4) > .box:nth-child(1) { flex-grow: 5; bacground-color: pink; }
.container:nth-child(4) > .box:nth-child(2) { flex-grow: 10; background-color: aqua; }
.container:nth-child(4) > .box:nth-child(3) { flex-grow: 25; background-color: tan; }
.container:nth-child(4) > .box:nth-child(4) { flex-grow: 50; background-color: tomato; }
.container:nth-child(4) > .box:nth-child(5) { flex-grow: 99; background-color: yellow; }


body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    display: flex;
    width: 95%;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: lightyellow;
}

.box {
    height: 50px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
}

<divclass="container"><divclass="box"><span>flex-grow: 1</span></div><divclass="box"><span>flex-grow: 1</span></div></div><divclass="container"><divclass="box"><span>flex-grow: 3</span></div><divclass="box"><span>flex-grow: 7</span></div><divclass="box"><span>flex-grow: 1</span></div></div><divclass="container"><divclass="box"><span>flex-grow: 10</span></div><divclass="box"><span>flex-grow: 5</span></div><divclass="box"><span>flex-grow: 1</span></div></div><divclass="container"><divclass="box"><span>flex-grow: 5</span></div><divclass="box"><span>flex-grow: 10</span></div><divclass="box"><span>flex-grow: 25</span></div><divclass="box"><span>flex-grow: 50</span></div><divclass="box"><span>flex-grow: 99</span></div></div>

jsFiddle demo

---

Note that the flexbox spec recommends using flex-grow as part of the flex shorthand property.

7.2 Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

---

For a detailed description of how flex-grow works, see this post:

• flex-grow not sizing flex items as expected

---

When working with the flex property refer to the spec for a summary of common values.

• 7.1.1. Common Values of flex

Solution 2:

in the case of a flexbox, if you set flex:1; to childs, it will spray them evenly.

2 childs = 50% average including margin , bordeers ... 3 childs = 33% average ...

if you have 2 childs, and want 33% / 66% set : flex:1; to one and flex:2; to the other .or flex:33.33 and flex:66.66 if this seems clearer to you :)

examples:

.flex {
  display:flex;
}
divdiv {
  flex:1;
  padding:0.5em;
  border:solid;
  margin:5px;
}
.f2 {
  flex:2;
}

<divclass="flex"><div></div><div></div></div><divclass="flex"><div></div><div></div><div></div></div><divclass="flex"><div></div><div></div><div></div><div></div></div><divclass="flex"><div></div><divclass="f2"></div></div><divclass="flex"><div></div><divclass="f2"></div><div></div></div>