javascript - CSS3 flexbox 中的对齐

Question

我在做 React/Redux 电子商务元素，元素使用 Flexbox 进行布局和设计，我有 React 知识，但我是 CSS3 flexbox 的新手，我必须在 flexbox 中实现布局，90% 已完成但无法对齐某些元素，我的 React 代码、SCSS 代码以及预期和实际设计发布在下面，任何人都可以帮助我实现这种布局，在此先感谢

只有我需要在 flexbox 的帮助下(数量超过 325 迪拉姆)

---

CSS 代码

.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 代码

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

实际结果

预期结果

响应式 View

Answer 1

您包装“AED 325”和“{I18n.getText('cart.cart-modal-qty', {qty: quantity}, 'quantity {qty}')}”，然后设置一个 qntAndPriceBlock 规则与

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

堆栈片段

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

---

由于 .productBox 看起来是一个 flex 行容器，并且这也会使 .qntAndPriceBlock 成为一个 flex 元素，您可能还需要添加 flex-grow: 1 让它占据整个宽度

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