FAQ: Flexbox - flex

This community-built FAQ covers the “flex” 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

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!

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/lessons/learn-flexbox-l/exercises/flex
On that excercise, I have been playing with the measurments of flex-basis, I have changed flex-basis from 10px to 1000px and nothing changes, why?

This is from Layout with Flexbox. To test your change I added a middle to the markup.

  <h1>Middle</h1>
  <div class="container" id="middle">
    <div class="side"></div>
    <div class="center"></div>
    <div class="side"></div>
  </div>

and then in the CSS, add,

#middle .side {
  flex: 1 2 75px;
}

#middle .center {
  flex: 2 1 1000px;
}

and got this…

Be sure to follow-up each new lesson with a reading in the documentation…

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

1 Like

Which one is a best practice, the flex property or specifying the flex-grow, flex-shrink, flex-basis seperately?

Best to get advice from someone who is in the know as far as Flex is concerned. I’ve been out of the loop for several years, now, and have very little hands-on experience. Someone who uses this everyday will give a more valid answer to your question.

1 Like