使用flexbox对齐项目

Question

hii我有一个简单的部分，它在左右两侧显示数据列表，我想看起来像这样

这是jsfiddle：https://jsfiddle.net/Mwanitete/ukxavqwn/33/

这是我到目前为止所拥有的

.main-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.data-right-bottom ul li{
margin: 10px;
list-style-type: none;
}
.data-right-bottom  ul li span{
  width: 200px;
  display: flex;
  width: 300px;
}

<div class="main-box">

<div class="data-right-bottom">
                <ul>
                    <li style="display: none;">
                        <span>Total wrapping (tax incl.)</span>
                        <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
                    </li>
                    <li>
                        <span>Total products (tax incl.)</span>
                        <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
                    </li>
                    <li>
                        <span>Total shipping (tax incl.)</span>
                        <span class="total_shipping_right">
                
               12,00 zł
                    
               </span>
                    </li>
                    <li class="order-subtotal">
                        <span>Total (tax excl.)</span>
                        <span class="total_price_without_tax_right">182,73 zł</span>
                    </li>
                    <li class="order-discounts" style="display:none">
                        <span>Total discounts</span>
                        <span class="total_discount_right">0,00 zł</span>
                    </li>
                    <li class="order-tax">
                        <span>Total tax</span>
                        <span class="total_tax_right">39,27 zł</span>
                    </li>
                    <li class="order-total">
                        <span>Total</span>
                        <span class="total_price_right">222,00 zł</span>
                    </li>
                </ul>
            </div>

<div class="data-right-bottom">
                <ul>
                    <li style="display: none;">
                        <span>Total wrapping (tax incl.)</span>
                        <span id="total_wrapping_right" class="total_wrapping_right">0,00 zł</span>
                    </li>
                    <li>
                        <span>Total products (tax incl.)</span>
                        <span id="total_product_right" class="total_product_wt_right">210,00 zł</span>
                    </li>
                    <li>
                        <span>Total shipping (tax incl.)</span>
                        <span class="total_shipping_right">
                
               12,00 zł
                    
               </span>
                    </li>
                    <li class="order-subtotal">
                        <span>Total (tax excl.)</span>
                        <span class="total_price_without_tax_right">182,73 zł</span>
                    </li>
                    <li class="order-discounts" style="display:none">
                        <span>Total discounts</span>
                        <span class="total_discount_right">0,00 zł</span>
                    </li>
                    <li class="order-tax">
                        <span>Total tax</span>
                        <span class="total_tax_right">39,27 zł</span>
                    </li>
                    <li class="order-total">
                        <span>Total</span>
                        <span class="total_price_right">222,00 zł</span>
                    </li>
                </ul>
            </div>
            
            </div>

https://i.stack.imgur.com/l5fJ4.png 我在代码中缺少什么才能得到想要的东西？任何帮助将不胜感激

Answer 1

您需要将display: flex添加到您想显示为弹性项目的内容的父项（在本例中为<li>），然后将属性flex: 1 0 0添加到跨度。

https://jsfiddle.net/vr1c8tgo/

.data-right-bottom ul li{
    margin: 10px;
    list-style-type: none;
    display:flex;
}
.data-right-bottom  ul li span{
    width: 200px;
    width: 300px;
    flex: 1 0 0;
}