如何在Flexbox布局中右对齐元素？

Question

我有一个简单的部分要显示服装数据，这是我想要的：

更新我想要的内容。

我无法如上图所示在右侧对齐元素；我尝试了几种不同的方法，但是没有任何效果。我需要做什么才能使用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>

这是我的演示JSFiddle：https://jsfiddle.net/Mwanitete/ypv1cur6/19/

注意：JSFiddle中显示的数据仅用于演示目的；并非与上面的图片显示相同的真实代码。

Answer 1

您可能缺少一些宽度和弯曲/包裹设置：

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