Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Really struggling to understand what flex-basis is actually doing

Hi there,

After watching Guil's video about 4 times, I just can't seem to grasp the flex-basis concept. All I understand is that it has to work in conjunction with flex-grow (not really sure why. To me, flex-basis just seems useless if you aren't using flex-wrap.) and it kind of works like a media query: If an item is less than 200px... then do something (what is it doing?).

Please tell me if I am interpreting this completely wrong. I just can't seem to get my head around it!

Thanks, James.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Flex-basis allows you to set a flex child's default size. This is kinda cool, because let's say you know a profile pic has a fixed size, you can set the flex-basis to that size, whether it be a fixed size like pixels or a percentage, and than using flex grow, allow every other flex child to take up the remaining space. By default, flex-basis looks at the content inside, and distributes remaining space based on the flex-grow property of the element.

This is my favorite flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Derek Lin
Derek Lin
1,563 Points

let me take a jab at this. I think I'm getting it but at the same time I don't' think so. Basically, the flex-grow property allows us to tell flex box how to expand and shrink and when to expand and shrink. Expand when you can't take up the flex-basis width, which is why when I shrink the browser down to a mobile device width, it takes up rows. however, it also tells flex box to render the items in a way that maximizes the amount of flex child elements with that width, which is why, the third item moved itself up to the first row and left one to fill up a whole row of it's flex container. I believe in essence what flex-basis does is:

  1. define the minimum acceptable width of an item and try to attain that width on as many itmes as possible.

P.S. flex grow (actually I dont' get what this does). Does it define what is "full width" for each flex child?

Also what does this below mean? And how does making layout systems direction-agnostic better than regular layouts?

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

From my understanding, in simple terms...

  1. flex-grow makes the element larger than the other elements by a certain amount of times
  2. flex-shrink is the opposite of flex-grow and makes element smaller than the other elements by a certain amount of times
  3. flex-basis specifies the initial length of a flexible item
Cameron Chong
Cameron Chong
4,298 Points
Cameron Chong
Cameron Chong
4,298 Points

Based on my understanding after reading the article linked I would add to 1. Flex-grow divides up any remaining free space in a container. The container size does not change. For example, let's say you have two items in a container and the content of each is 50px. Then imagine that within the container there is 30px left of free space. Setting "flex-grow: 1;" on the first item and 2 on the second will give the first 10px of additional growth and 20px to the second.

B.B. Groeneveld
B.B. Groeneveld
2,826 Points

Yes, and based on my understanding after reading your comment, Cameron Chong, I would like to add the proper math to your example.

.container = 130px .item-1 = 50px .item-2 = 50px || 130 - 50 - 50 = 30(px) -- the extra free space -- || .item-1 grow value = 1 .item-2 grow value = 2 total value = 3 || 3 / 30 = 10(px) for each value || 1 (grow value) x 10 + item-1 (which is 50px) = total 'width' 60px 2 (grow value) x 10 + item-2 (which is 50px) = total 'width' 70px ||

check: .container = 130px .item-1 = 60px .item-2 = 70px || And done!