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

CSS

jordansangalang
jordansangalang
5,042 Points
Posted by jordansangalang
jordansangalang
5,042 Points

Flexbox order Question

I wanted to create a layout that has a single column row with a double column row beneath it. I have created the layout desired using Flexbox. However, I cannot figure out how to switch the positioning of the <img> and the <p>. I want to use flexbox to put he <p> on the left and the <img> on the right. I think having

<div class='secondary-content'> <div class="question 2"> <h2 class='question-h2-2'>Lorem ipsum dolor sit amet?</h2> <image class="question-image-2" src="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image" alt="stock image"</image> <p class="question-p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

.secondary-content { display: flex; flex-direction: column; justify-content: space-around; }

.question {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 10%;
    align-items: center;
}

.question h2 {
    flex-basis: 100%;
    padding: 20px;
    font-size: 32px;
}

.question img {
    flex-basis: 50%;
    padding: 20px;

}

.question p {
    flex-basis: 50%;
    padding: 20px;
}

.question-p-2 {
    order: 1 
}

2 Answers

Remi Vledder
Remi Vledder
14,144 Points
Remi Vledder
Remi Vledder
14,144 Points

It looks like you're trying to scale the two columns wit 50% using flex-basis?

That's not the correct approach. Rather you can set the flex-direction to "row".

Basically, if you use a div around your "image" and "p" tags, and set the display property to flex and flex-direction to row it will work:

<div class="row">
  <img src="https://some-image.png" /> 
  <p>Test</p>
</div>

.row {
  display: flex;
  flex-direction: row; /* this sets them to stack horizontally */
}

.row img {
  order: 2; /* this changes the order */
}

.row p {
  order: 1; /* this changes the order */
}

Here's an example with your code: https://jsfiddle.net/Spindle/s810vadk/

Small other note regarding the image HTML tag. Instead of <image></image> use <img />, see: https://www.w3schools.com/tags/tag_img.asp

Sources:

jordansangalang
jordansangalang
5,042 Points
jordansangalang
jordansangalang
5,042 Points

Thank you! I actually had that CSS-tricks guide up and kept reading it over and over. For some reason, adding an extra div container didn't occur to me. That makes total sense! thanks for the help!

Remi Vledder
Remi Vledder
14,144 Points
Remi Vledder
Remi Vledder
14,144 Points

Jordan Sangalang Cool! Glad to help. Would you mind accepting the preferred answer? That way if someone is experiencing the same problem they can easily spot the solution.

Fernando Boza
Fernando Boza
25,384 Points
Fernando Boza
Fernando Boza
25,384 Points

to create a 2 row ui here is the html. I created a div to hold the img and p and gave it a class img_p_container"

you can check it out here https://codepen.io/anon/pen/ZgbQML?editors=1100

<div class='secondary-content'> 
  <div class="question 2"> 
    <h2 class='question-h2-2'>Lorem ipsum dolor sit amet?</h2> 
    <div class="img_p_container">
       <image class="question-image-2" src="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image" alt="stock image"</image> 
       <p class="question-p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div>
  </div> 
</div>

after in the css i just added flex to .img_p_container and removed the order from question-p-2 and moved it to image

secondary-content { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-around; 
}

.question {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 10%;
    align-items: center;
}

.question h2 {
    flex-basis: 100%;
    padding: 20px;
    font-size: 32px;
}


.img_p_container{
  display: flex;
  flex-direction: row; 
}

.question img {
    flex-basis: 50%;
    padding: 20px;
/* 0 for image on left */
   order: 0; 
/*   1 for image on right */
     order: 1;
}

.question p {
    flex-basis: 50%;
    padding: 20px;
}
jordansangalang
jordansangalang
5,042 Points
jordansangalang
jordansangalang
5,042 Points

Thank you for your help! Such an easy solution. I'm not sure why I didn't think of that. While conceptually, I understand flexbox. I'm still working on thinking like 'flexbox' when creating layouts. Thanks again!

Fernando Boza
Fernando Boza
25,384 Points

Jordan Sangalang you should check it CSS Grids, i like it better than flexbox when creating UI's, but that's just my preference