CSS3 flexbox中的对齐方式

Question

I am working on React/Redux e-commerce project, project uses Flexbox for layout and designing, I have a knowledge of React but I am new to CSS3 flexbox, I have to achieve a layout in flexbox, 90% is complete but not able to align some elements, my React code, SCSS code and expected and actual designs are posted below, can any one help me to achieve this layout,thanks in advance

only I have to place item (AED 325 above the quantity) with the help of flexbox

---

CSS Code

.modalHeaderWrapper {
  display: flex;
  width: 100%;
  height: 50%;
  flex-direction: row;
  border-bottom: solid 1px $color-border;

   .left {
     flex: 3;
     background-color: $color-bg-primary;
   }

   .right {
     flex: 1;
     flex-direction: column;
     background-color: $gray-bg;
     border-top: 1px solid $_greyLight;
     border-right: 1px solid $_greyLight;
     border-left: 1px solid $_greyLight;

     .modalCartSummary {
       text-align: center;
       margin-top: 30px;
     }
   }
}



.aed {
  font-size: 20px;
  font-weight: lighter;
  color: $_offBlack;
}

.productBox {
  display: flex;
  flex-direction: row;
  width: 100%;

    .modalProductName {
      font-size: 14px;
      color: $_offBlack;
      text-align: left;
      line-height: 17px;
    }
}

.modalProductSummary {
  padding: 10px 20px;
}

.shippingSellerWrapperModal {
  font-size: 12px;
  margin-top: -13px !important
}

.modalImage {
  height: 74px;
  width: auto;
  margin-left: 17px;
}

---

React code

<div className={styles.modalHeaderWrapper}>
    <div className={styles.left}>
        <div className={styles.type}>
          <div className={styles.productAddTitle}>
              <Icon name="radio-checked" className={styles.check} />
          </div>
        </div>
        <div className={styles.productBox}>
          <div>
              <img src={Helper.getTransformationUrl(product.image_keys[0])} className={styles.modalImage} alt="new"/>
          </div>
          <div className={styles.modalProductSummary}>
              <div className={styles.modalProductName}>
                  {product.product_title}
              </div>
              <div className={styles.reviewbadge}>

                    <div className={styles.reviewCtr}>
                        <ProductReviewsBadge
                            reviewData={this.props.reviewsSummary}
                        />
                    </div>
              </div>
              {this.renderProductSubComponent('shippingEstimator', product, offer)}
              <div className={styles.shippingSellerWrapperModal}>

              </div>
          </div>
          <div className={styles.qntAndPriceBlock}>
              AED 325
              {I18n.getText('cart.cart-modal-qty', {qty: quantity}, 'quantity {qty}')}
          </div>
        </div>
    </div>
    <div className={styles.right}>
        <div className={styles.modalCartSummary}>
            <p className={styles.itemsNumber}>
                 'your cart has worth 
            </p>
            <span className={styles.aed}>
                AED
            </span>
            <span>
              <strong className={styles.value}>
                  {I18n.formatCurrency(this.props.cartSummary.grandTotal.value)}
              </strong>
            </span>
        </div>

        <div className={styles.btnWrapper}>
            <Button className={styles.modalBtn} onClick={() => browserHistory.push('/' + this.props.locale.locale)}>
                {I18n.getText('account.profile-address-cancel', {}, 'VIEW CART')}
            </Button>
            <Button className={styles.modalBtn} variant="transparent" onClick={this.closeModal}>
                {I18n.getText('account.profile-address-cancel', {}, 'CONTINUE SHOPPING')}
            </Button>
        </div>
    </div>
</div>

Actual Outcome

Expected Outcome

Responsive view

Answer 1

You wrap the "AED 325" and the "{I18n.getText('cart.cart-modal-qty', {qty: quantity}, 'quantity {qty}')}" and then set up a qntAndPriceBlock rule with

.qntAndPriceBlock {
  display: flex;
  flex-direction: column;       /*  stack the flex items vertically  */
  align-items: flex-end;        /*  right align flex column items  */
}

Stack snippet

 .qntAndPriceBlock { display: flex; flex-direction: column; align-items: flex-end; } 

 <div class='qntAndPriceBlock'> <div>AED 325</div> <div>{I18n.getText('cart.cart-modal-qty', {qty: quantity}, 'quantity {qty}')}</div> </div> 

---

As the .productBox appears to be a flex row container, and as that will also make the .qntAndPriceBlock a flex item, you might also need to add flex-grow: 1 to it so it takes full width

.qntAndPriceBlock {
  flex-grow: 1;                 /*  take available space left  */
  display: flex;
  flex-direction: column;       /*  stack the flex items vertically  */
  align-items: flex-end;        /*  right align flex column items  */
}