Flexbox not giving equal width to elements

html

flexbox

responsive-design

css

flexbox

responsive-design

css

byAnton Shumikhin·Jul 22, 2024

Ensure equal widths for Flexbox children by using flex: 1. It evenly divides space:

.child { flex: 1; }

Assign it to all children inside the Flex container, they'll share space equally.

Flex-basis and flex-grow for initial sizing

Start your flex items with a width of zero and allow them to grow at the same rate to fill the remaining space. This can be done using flex-basis: 0 and flex-grow: 1:

.child {
  flex-grow: 1;
  flex-basis: 0; /* Starting zero, like my chances with javascript */
}

Considering padding and borders

Padding and borders can affect width. Contain these within the element's dimensions using box-sizing: border-box:

.child { 
  flex: 1; /* Let's flex these items! */
  box-sizing: border-box; /* Best invention after sliced bread */
}

Leveraging the shorthand

The flex: 1 shorthand sets flex-grow, flex-shrink, and flex-basis all at once, resizing flex items equally, no sweat:

.child {
  flex: 1; /* One rule to rule them all */
}

Controlling content impact

Prevent content overflow from inflating flex item by enforcing min-width: 0. This ensures content doesn't end up derailing your layout:

.child { 
  flex: 1; 
  min-width: 0; /* Keeping content in check, otherwise it spills over like my coffee */
}

Power of flex-grow

By giving each flex item flex-grow: 1, you're portioning out space like equal slices of a pizza - everyone gets equal share, whether they like pineapple or not.

For stricter sizing

Use flex-grow: 0 for strict size control and define width or flex-basis:

.child {
  flex-grow: 0; /* No growth, like my plants. */
  width: 20%; /* or flex-basis: 20%; */
}

Orientation matters

Flex items align following flex-direction, default is row. There's always the right way, and then there's the flex way.

The secret sauce of responsiveness

Flex-grow: 1 aids equal scaling of sections, making your layout responsive and graceful, like a ballet dancer in the world of CSS.

Default alignment behaviour

By default, a flex row aligns items based on their content height. This is like a bean-bag chair, it takes the shape of the content.

Test in real-world scenario

Try out a live demo on platforms like JSFiddle or CodePen for hands-on learning. Get dirty with code... it's the fun part!

Validation with examples

Bringing your imagination to life, Codeply demonstrates sample layouts and gives instant visual feedback. It's like seeing your flex items strut on a runway.