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!
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
John Weland
42,478 PointsFlexbox Layout Issue
So I have been trying to use Flexbox in my work when I can. I have a pretty good grasp on it other than an issue with paragraphs of text breaking the display.
<div class="flex-container">
<aside>
<img src="src/img.png" />
<a href="url.com">a link</a>
</aside>
<main>
<p>A long paragraph</p>
<p>A long paragraph</p>
<p>A long paragraph</p>
</main>
</div>
.flex-container {
display: flex;
flex-direction: row;
}
with long paragraphs is seems that the layout breaks rather than the flex taking president and the paragraphs wrapping within the allotted room of their container they stay solid and break the flex container.
screenshot here
1 Answer

Sally Gradle
24,694 PointsInstead of flex-direction: row;
try using flex-flow: column-reverse wrap;
. This will combine flex-direction and flex-wrap into one instruction.
John Weland
42,478 PointsJohn Weland
42,478 Pointsthe problem is then it makes what should be a row into a column instead and if I use wrap rather than the text wrapping first the moment the paragraph line should break the flex items break and wrap instead ending me right back in to a column layout. .