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
epmbqxxkpx
Front End Web Development Techdegree Student 6,193 PointsCouldn't you have also done this with align-content: space-between?
I suppose it's a more tedious method than the one shown in the video, but my initial reaction was to wrap all the content in the column that wasn't the button in a flex container, then wrap the button in a flex container, and then use align-content: space-between.
Again, I know, more tedious, but wouldn't that have worked, too?
2 Answers
Belve Marks
7,332 PointsThat is a more complicated solution. I don't think it would give you the flexibility of alignment shown in the last few seconds of the video (i.e., align left and align right).
Laman Mahammadli
2,528 Pointsalign-content wouldn't work because align-content aligns the items on cross-axis. But here button and the other items are on main-axis because of the flex-direction:column. But justify-content:space between wouldn't work either, because there are more than 2 items.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsAakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Pointsalign-content is a property for "Flexbox container". So , for that you have to make "col" a flexbox container by asssigning it a "display: flex" and "flex-direction: column" . After doing this when you use align-content property , it will work at cross axis not at main axis . We want to create space at main axis which is the vertical axis now due to "flex-direction:column". Hope you got it. Thanks.