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
Nas Jones
7,849 PointsFlexbox
What is the difference between flex basis and flex grow? What is the purpose of each?
1 Answer
John Johnson
11,790 Pointstl/dr: flex-basis set's the size of an element to whatever value you give it, and flex-basis sets the size of an element relative to the size of it's sibling elements' flex-grow properties.
Flex-basis is used for setting the size of a flex item directly using values such as 100px, 3em, and 2rem. There are also sizing keywords such as auto, fill, and max-content.
Flex-grow changes the size of a flex item relative to it's flex siblings. It accepts simple numeric values, and the default is 1. If an item's flex-grow property is 2, then it will be twice as wide as it's sibling flex elements. It essentially works like assigning a ratio of how wide an element to be compared to it's siblings.
You can set a different flex-grow property on each element in a flex-box. If you have three flex items with flex-grow values of 1, 2, and 3: item one will be 1/6th the total width of the container, item two will be 2/6ths (or 1/3rd) the total width, and item three will be 3/6ths (1/2) the total available width.
Nas Jones
7,849 PointsNas Jones
7,849 PointsThank you for the help i see now. But will this effect media queries, does it have anything to do with media queries? like if i know the width will change with these values wouldn't i have to make changes in media queries too?
John Johnson
11,790 PointsJohn Johnson
11,790 PointsThese styles will work in media queries just like any other styles. They simply won't be applied if the conditions of the media query aren't met. When you set min-width or max-width in a media query, it isn't based off of element widths, it's based off of the viewport width. You'll certainly have to do some testing to make sure everything looks the way you want it to, but that doesn't necessarily mean that using this styles will automatically affect your media queries.