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
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsFlexbox code challenge help please
Challenge Task 1 of 2
Set the columns to expand and display on one line when they are 300px or wider. But when the columns are narrower than 300px, the browser will redistribute the space and display them on multiple lines.
.row { display: flex; }
Could someone please help me here, my attempts are not working and I am starting to confuse myself. Thank you.
6 Answers
Gianmarco Mazzoran
22,076 PointsHi Tracy Excell,
to do that you have to told to the container, in this case the class .row to distribute the child element like this
.row {
display: flex;
justify-content: space-between; /* or space-around */
flex-flow: row wrap;
}
after that you have to select the child element (the elements inside the row class) and tell that their min-width is 300px
.row {
display: flex;
justify-content: space-between; /* or space-around */
flex-flow: row wrap;
}
.child {
flex: 1;
min-width: 300px;
}
I also recommend you to look at this page. A great guide to css flexbox.
Filip Cimbaljevic
9,183 Points.row { display: flex; justify-content: space-between; /* or space-around */ flex-flow: row wrap; }
.column{ flex: 1; min-width: 300px; }
This code doesn't work in my exercise.
Gianmarco Mazzoran
22,076 Pointscould you post your code?
Filip Cimbaljevic
9,183 Points.row { display: flex; justify-content: space-between; /* or space-around */ flex-flow: row wrap; }
.column { flex: 1; min-width: 300px; }
Filip Cimbaljevic
9,183 PointsIt's the same code that you written 5 days ago. I've only changed the class name into .column, and it doesn't work. So please tell me what's wrong with code. Thanks!
Filip Cimbaljevic
9,183 PointsThis is the error message that I get: " Bummer! Use the property that specifies the initial main size of the columns. "
Filip Cimbaljevic
9,183 PointsI found it. Thanks anyway. This is code. It's simple.
.row {
display: flex;
justify-content: space-between;
}
.column {
flex: 1 300px;
flex-flow: row wrap;
}
Gianmarco Mazzoran
22,076 PointsGood job!!
the only thing is the property flex-flow need to applied to the parent element, in this case the class .row!
Filip Cimbaljevic
9,183 PointsOk. Thank you again!
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsTracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsThank you
Gianmarco Mazzoran
22,076 PointsGianmarco Mazzoran
22,076 PointsGlad that I help you! Happy coding!
Filip Cimbaljevic
9,183 PointsFilip Cimbaljevic
9,183 PointsIt doesn't work for my workspace.