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
Mia Nguyen
2,964 PointsWhy the flex-basis: 50% isn't working?
I have a question regarding this part:
@media (min-width: 769px) {
.main-header,
.main-nav,
.row {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
.col {
flex: 1 50%;
}
.row {
flex-wrap: wrap;
}
.secondary {
order: -1;
}
I wonder why all the columns have the same width when 769px < viewport <1025px after I removed this rule or make the flex-wrap: nowrap;
.row {
flex-wrap: wrap;
}
I mean the flex-basis is set at 50%, so what makes columns' width equal? I don't understand how browser calculates the columns' width in this case.
Thank you so much~
1 Answer
Daniel Benisti
Front End Web Development Techdegree Graduate 22,224 PointsYou are almost there!! try @media screen and (min-width: 769px)
Benjamin Boulter
21,925 PointsBenjamin Boulter
21,925 PointsFlex-basis gives the flexbox an initial size. When flex-basis isn't set, the box gives space based on the content it contains. If you have 3 sections and you say display flex to the container holding the sections, they change from their normal vertical position to an horizontal position with 3 columns, taking space based on the content inside of them.
Flex basis helps to give a particular section a size. In the code, we said when the viewport is 769px and above we want all the boxes to be equal size. That's why we did flex-grow: 1.
We now set our container to wrap. Meaning that the items can wrap when there's no space to hold all 3 sections. If we didn't set the flex-wrap to wrap, all 3 sections would be in one place and take up as much space as they want and our website will not be responsive.
Next, we set our flex-basis to 50%. This means that we only need two sections on top when the screen is 769px and above. Remember that your width is 100% total. Flex-basis of 50% gives two sections that amount. Then it wraps the third section and gives it 50% as well.
Our 1025px screen is big enough to hold our 3 sections. So what do we do? we set our flex basis to zero so our 3 sections can take equal spaces when the screen is big enough.
in conclusion. When the screen is 769px and above, give the items a flex-grow of 1 (equal share of the space). Give them an initial size of 50% with flex-basis (They would take 50% of the screen), flex wrap them so the 3rd section wraps down. When it's 1025px and above, flex-grow 1 (Give them equal space), but let the flex basis be zero. Let the 3 sections calculate and share equal spaces in one line.