How do I right-align elements in a flexbox layout?

Question

I have a simple section which I want to display clothes data, here is what I would like to have:

UPDATE Explanation of what I want.

I am not able to align elements on the right side as shown in the image above; I tried a few different ways, but nothing worked. What do I need to do to get what I want using flexbox?

.data{
  display: flex;
  justify-content: space-between;
}
.data-right{
  display: flex;
  flex-direction: row;
}
.data-top-right-top_right{
  display: flex;
  justify-content: flex-end;
}

<div class="data">
   <div class="data-left">
      <div clas="data-left-top">
         <p>
            jest tekstem stosowanym 
         </p>
      </div>
      <div clas="data-left-bottom">
         <p>
            jest tekstem stosowanym 
         </p>
      </div>
   </div>
   <div class="data-right">
      <div class="data-right">
         <div clas="data-right-top">
            <div class="data-right-top_left">
               <a href="https://ibb.co/em6zfK"><img src="https://thumb.ibb.co/em6zfK/piekna_bestia.jpg" alt="piekna_bestia" border="0"></a>
            </div>
            <div class="data-right-top_right">
               <ul>
                  <li>Calvin Clain</li>
                  <li>SM</li>
                  <li>200</li>
               </ul>
            </div>
         </div>
         <div clas="data-right-bottom">
            <ul>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
               <li>
                  <span>Total price</span>
                  <span>200</span>
               </li>
            </ul>
         </div>
      </div>
   </div>
</div>

Here is my demo JSFiddle: https://jsfiddle.net/Mwanitete/ypv1cur6/19/

Note: data in shown in the JSFiddle is just for demonstration purposes; it is not real code that would display the same as the image above.

I think you should arrange your HTML in a different way.. insert into the data-right div only 2 divs (one for the image and one for description). then arrange them with css — SeReGa, Sep 05 '18 at 19:02
@Michael_B I have updated the image what I would like to have check now — The Dead Man, Sep 05 '18 at 19:04
@SeReGa sorry bro I updated the right image , now check , I want my data to look like the image showing in right side div — The Dead Man, Sep 05 '18 at 19:05
@user9964622 Can you be more clear about what your problem is? How exactly does your code output differ from your desired output? E.g. do you want the bullet lists to be on top of each other? Do you want there to be a photo beside each list? Etc. — TylerH, Sep 05 '18 at 19:09
hard to follow with these many imbrication , before styling you should build an html structure that is readable on its own (no style) https://jsfiddle.net/ypv1cur6/27/ . can you clarify or check the bits of codeor screenshot you shared ? — G-Cyrillus, Sep 05 '18 at 19:15
@user9964622 Does the [`order` property](https://stackoverflow.com/a/32829829/2756409) do what you want? That answer isn't quite directly applicable here because you have more convoluted markup, but it might help you get where you can handle the rest on your own. — TylerH, Sep 05 '18 at 19:19
@TylerH U can try urself bro here is the jsfiddle I tried different ways, the left side is okay only the right side of those two big div https://jsfiddle.net/Mwanitete/ypv1cur6/19/ — The Dead Man, Sep 05 '18 at 19:21
@user9964622 Actually I'd rather help you help yourself than do it all for you :-) — TylerH, Sep 05 '18 at 19:22
flex-wrap and width missing ? https://jsfiddle.net/ypv1cur6/38/ — G-Cyrillus, Sep 05 '18 at 19:23
I tried order didnt work , as you can seee here order does not help that is whay I said u can try urself, the problem is not ordering , problem is bottom elements jump to the top div in right side and those deserved to be in right side of image goes down — The Dead Man, Sep 05 '18 at 19:25
@G-Cyr put that as answer bro , simple as that :( I will accept your solution quickly as hell , aajajaja thanks — The Dead Man, Sep 05 '18 at 19:26

score 2 · Accepted Answer · answered Sep 05 '18 at 19:30

you might be missing some width and flex/wrapping setting:

.data {
  display: flex;
  justify-content: space-between;
}
/* added */
.data-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.data-right-top {
  display: flex;
}

.data-right-bottom {
  width: 100%;
}
/* end update */

.data-top-right-top_right {
  display: flex;
  justify-content: flex-end;
}

<div class="data">
  <div class="data-left">
    <div clas="data-left-top">
      <p>
        jest tekstem stosowanym
      </p>
    </div>
    <div clas="data-left-bottom">
      <p>
        jest tekstem stosowanym
      </p>
    </div>
  </div>
  <div class="data-right">
    <div class="data-right">
      <div class="data-right-top">
        <div class="data-right-top_left">
          <a href="https://ibb.co/em6zfK"><img src="https://thumb.ibb.co/em6zfK/piekna_bestia.jpg" alt="piekna_bestia" border="0"></a>
        </div>
        <div class="data-right-top_right">
          <ul>
            <li>Calvin Clain</li>
            <li>SM</li>
            <li>200</li>
          </ul>
        </div>
      </div>
      <div class="data-right-bottom">
        <ul>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
          <li>
            <span>Total price</span>
            <span>200</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/ypv1cur6/38/

How do I right-align elements in a flexbox layout?

1 Answers1