CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Jared Cannon
Jared Cannon
3,838 Points

Flex property doesn't behave like shown in video

Hello, when i use the flex:1; property the space still redistributes. Why would this be happening? When I use flex-grow:1; and flex-basis:0; it also redistributes the space. I am very confused why this is happening. I am using Google Chrome.

Thanks

2 Answers

Adam Dakin
Adam Dakin
7,373 Points

If you could add your code here would help. For example you could be using flex-grow and basis on the wrong elements. Make sure they are on the item within the flex not the container.

Gilad Goldman
Gilad Goldman
5,637 Points

I am pretty sure his statement about how they would not break to a new line is ignoring:

flex-wrap: wrap;

If you comment this out your sheet behaves the same as Guil's. More on flex-wrap can be found here

The code that I think Guil has used in the final example (6m30s) is below for your reference

/* ================================= 
  Flexbox
==================================== */

.container {
    display: flex;
/*  flex-wrap: wrap; */
}

.item {
  flex: 1;
}

.item-2 {
  flex: 2;
}```
Boban Talevski
Boban Talevski
24,775 Points

In my case (Chrome 64.0.3282.186 on Win 10), without the wrap, the divs are overflowing out of the container at about 540px viewport width, so I don't think Guil has that commented out in the video as it seems he does go below 540px width, but this doesn't happen in his case.

In my case, the divs are simply not becoming any narrower whenever there's a word that needs to be wrapped, and they overflow, or drop on a new line if I have the wrap property enabled. In the video, the words themselves are actually overflowing out of the respective divs which allows for divs to get narrower without breaking on a new line even though he has the wrap property enabled. I do in fact believe his wrap property is active, as I think he wanted to demonstrate that even with wrap active, the divs with flex-basis set to zero would really go down to zero width without breaking on a new line.

I'm thinking of leaving this to browser inconsistencies between then and now and will handle it down the road whenever I need it. Unless Guil Hernandez has something to add of course at this time to clear the confusion :).

Jeremy Antoine
Jeremy Antoine
14,336 Points

Thank you Gilad. You hit the nail on the head!