Equal Width Using Flex And Border-box

March 31, 2024 Post a Comment

I am using box-sizing: border-box; with varying border thicknesses within a flexbox. I want the elements within the flexbox to have equal widths, but it calculates the width of the

Solution 1:

The box-sizing: border-box is used to change the default CSS box model used to calculate width and height of the elements.

So would be like this:

total width = border + padding + content width
and
total height = border + padding + content height

But that doesn't happen in flex-grow, but in flex-basis

Here is a good tutorial about flexbox

So you can use flex:0 20% instead of flex:1,

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container.block {
  height: 28px;
  flex: 020%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container.block.selected {
  border: 3px solid blue;
}

<divclass="container"><spanclass="block">0</span><spanclass="block">1</span><spanclass="block selected">2</span><spanclass="block">3</span><spanclass="block">4</span></div>

Note: if you have more elements than 5, then you can use calc() like this flex: 0 calc(100%/8) where 8 is the # of elements you will have

Snippet with more elements

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container.block {
  height: 28px;
  flex: 0calc(100%/8);
  border: 1px solid black;
  box-sizing: border-box;
}

.container.block.selected {
  border: 3px solid blue;
}

<divclass="container"><spanclass="block">0</span><spanclass="block">1</span><spanclass="block selected">2</span><spanclass="block">3</span><spanclass="block">4</span><spanclass="block">5</span><spanclass="block">6</span><spanclass="block">7</span></div>

Solution 2:

The flex-grow property does not set the width or height of flex items. It's job is to distribute free space in the container among flex items.

You have all items set to flex: 1, which is shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

This distributes free space in the row equally among items.

BUT borders (and padding) are factored in separately.

flex-grow doesn't care about box-sizing: border-box, because box-sizing applies to width and height calculations which, as mentioned earlier, are not functions of flex-grow.

Instead, use the flex-basis property, which is equivalent to width (in a row-direction container) and will respect box-sizing:

flex: 0020%;

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container.block {
  height: 28px;
  flex: 0020%; /* adjustment */border: 1px solid black;
  box-sizing: border-box;
}

.container.block.selected {
  border: 3px solid blue;
}

<divclass="container"><spanclass="block">0</span><spanclass="block">1</span><spanclass="block selected">2</span><spanclass="block">3</span><spanclass="block">4</span></div>

Solution 3:

Instead of setting the flex to one, you can set the flex-basis to 20% and then the width will be divided equally:

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container.block {
  height: 28px;
  flex-basis: 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container.block.selected {
  border: 3px solid blue;
}

<divclass="container"><spanclass="block">0</span><spanclass="block">1</span><spanclass="block selected">2</span><spanclass="block">3</span><spanclass="block">4</span></div>

Solution 4:

One way could be setting a 2px padding to the .block and removing it for .selected

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container.block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 2px;
}

.container.block.selected {
  border: 3px solid blue;
  padding: 0px;
}

<divclass="container"><spanclass="block">0</span><spanclass="block">1</span><spanclass="block selected">2</span><spanclass="block">3</span><spanclass="block">4</span></div>

Solution 5:

your problem is here flex: 1; change it to flex: 1 0 20%; even for more/less elements. no need to calculate the width using calc as others mentioned.

also just change this:

.container.block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing:         border-box;
}

to:

.container.block {
  height: 28px;
  flex: 1020%;
  border: 1px solid black;
    -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

DEMO:https://jsfiddle.net/4aww81wv/

Html5 Works