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

CSS

Posted by John Weland
John Weland
42,478 Points

Flexbox 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

https://lh6.googleusercontent.com/-i0GP1ejGHjE/VVIfvaWioAI/AAAAAAAABh0/oF5So40fAUI/w1520-h855-no/flexbox-eww.png

1 Answer

Sally Gradle
Sally Gradle
24,694 Points
Sally Gradle
Sally Gradle
24,694 Points

Instead of flex-direction: row; try using flex-flow: column-reverse wrap; . This will combine flex-direction and flex-wrap into one instruction.

John Weland
John Weland
42,478 Points

the 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. .