Question

我正在研究React / Redux电子商务项目，项目使用Flexbox进行布局和设计，我对React有所了解，但我是CSS3 flexbox的新手，我必须在flexbox中实现布局，90％是完整的但是无法对齐某些元素，我的React代码，SCSS代码以及预期和实际设计都贴在下面，任何人都可以帮我实现这个布局，提前谢谢

只有我必须在flexbox的帮助下放置（高于数量的AED 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;
}

反应代码

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

实际结果

预期结果

响应式视图

Answer 1

你包装＆＃34; AED 325＆＃34; ＆＃34; {I18n.getText（＆＃39; cart.cart-modal-qty＆＃39;，{qty：quantity}，＆＃39; quantity {qty}＆＃39;）}＆＃34;然后使用

设置qntAndPriceBlock规则

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

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

由于.productBox似乎是一个弹性行容器，并且因为它也会使.qntAndPriceBlock成为一个弹性项目，您可能还需要向其中添加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  */
}

CSS3 flexbox中的对齐

1 个答案: