FAQ: Flexbox - flex-basis

This community-built FAQ covers the “flex-basis” exercise from the lesson “Flexbox”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise flex-basis

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Ok, I was doing really great understanding flexbox up until flex-basis link to lesson. I’m just having a hard time wrapping my head around this property. I understand that you’re setting a width value prior to proportionally stretching or shrinking the element. I understand what it does. Its how it works that I’m not understanding fully, wouldn’t the size of the screen effect how the element will look prior to the shrinking or stretching? How does setting a pixel value help? Wouldn’t a smaller screen hide part of the element since it has a, so to speak, fixed size set in px? Maybe I’m just missing the concept fully.

Scratch my question. It just sort of hit me that its setting a size before it ever hits the container! It is then shrank or stretched proportionally from the flex-basis size. I get it sorry about the long rambling question.

1 Like

Please can someone help me with the explanation of why we need to declare min-height as opposed to using flex-basis? Why and how do we use min-height while using the flexbox?

Can someone please help me!!! I think one this is the site playing up as I’ve seen this before!!!

In the question " 6.

In the .shrink.center rule in style.css , add a flex-shrink value of 2 ."

Which I’ve put " .shrink.center {

flex-shrink: 2;

}"

And it still tells me

Error!!

“Did you add ‘flex-shrink: 2;’ to the ‘.shrink.center’ rule in style.css?”

SO I was right. It wasn’t me that type anything wrong.

After waiting all day for someone to help and nobody did and so I’ve clicked the view solution button which just did the work for me. Thanks

@blog2245393326 no,you are right,i’ve presented them those problems before…they said to check my wi-fi connection lol .
But it does has to do with your browser…
I’m using Chrome and its doing better but still keep having errors when the answer its true,and even had different CSS layout sometimes under certain lessons so i was utterly confused when it asked me to change the property under certain class but i don’t even see that class.
Refreshing the page actually helps in most of the situations.

1 Like

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/lessons/learn-flexbox-l/exercises/flex-basis

Anyone understand what is happening here or has any clarifying resources to share? I am completely lost.

Struggling a bit to understand this and how the grow-shrink values work in conjunction with flex-basis. But after some experimentation I’ve come up with 4 sentences that I think describe and explain the properties and how they interact. Can someone fact-check me/the sentences?

  1. If the flex-container items have a shrink value of 0, flex-basis works in practice as a minimum width (because they cannot shrink past their basis).

  2. If the flex-container items have a grow value of 0, flex-basis works in practice as a maximum-width (because they cannot grow beyond their basis).

  3. But flex-basis is neither minimum width or maximum width. It is best described as the break-point from which shrinking and growth occurs.

  4. If the flex-container items have both a grow and a shrink value and a flex-basis of 150px, growth/shrinking will begin to occur when the flex-item is more or less than 150px.

Are these sentences true? If so, I finally get it. :smiley:

2 Likes

was also a lil confused on some of the content concerning flex-basis, but i guess it serves as a start point to where the item should flex from, if you remove flex-grow and and flex-shrink from the rule set the items will only grow to max width/height(?) of flex-basis since flex-grow has a default of 0. how ever will shrink small then then the value flex-basis is set to as flex shrink has a default value of 1. idk if this will help any one but that’s my under standing of it and it doesn’t look like any one else has commented in here for a minute.

I think you guessed right and you helped me understand the exercice thank you. I just am not sure of the 1 one. If the screen shrinks way too much, the basis width of the element will not be displayed correctly since it doesn’t have enough space and it will shrink past its basis. :thinking: