Html 为什么“自对齐”不将项目左右对齐？

现在我想要的是.q-order-item-info位于左侧，.q-order-item-quantity位于右侧，但不知为什么它不会发生，所以我应该怎么做才能使它工作

我的代码如下所示：

xyz.scss

.order-container {
    height: 100vh;
    width: 100vw;
    overflow-y: none;
    float: left;
    background-color: #f3f3f3;
    .q-background {
        float: left;
        width: 100%;
        height: 14.3vw;
        background: url("../../image/i-header-list.jpg") no-repeat;
        background-size: contain;
    }
    .q-text {
        position: relative;
        top: 2rem;
        font-size: 2rem;
        text-align: center;
    }
    .q-order-container {
        width: 100%;
        position: relative;
        padding-top: 20px;
        top: 2rem;
        height: 80%;
        .q-orders-div {
            position: relative;
            margin-left: 5rem;
            float: left;
            overflow: auto;
            width: 50%;
            height: 70%;
            background-color: #f3f3f3;
            .orders-tile {
                width: 90%;
                height: 20%;
                position: relative;
                margin-left: 3.5rem;
                background-color: #f3f3f3;
                .q-order-divider {
                    position: absolute;
                    margin-left: 5%;
                    bottom: 0;
                    width: 80%;
                    border-bottom: 1px solid #e7e7e7;
                }
            }
            .q-order-icon {
                position: relative;
                top: 50%;
                width: 4rem;
                height: 4rem;
                float: left;
                transform: translateY(-50%);
                background: url("../../image/ic_truck.png") no-repeat;
                background-size: contain;
            }
            .q-order-foodtruck-info {
                background-color: #f3f3f3;
                position: relative;
                margin-left: 2rem;
                width: 80%;
                float: left;
                top: 50%;
                transform: translateY(-50%);
                .q-order-foodtruck-name {
                    font-size: 1.2rem;
                    color: #345;
                }
                .q-order-time {
                    width: 100%;
                    .q-order-status-text {
                        font-size: 1.1rem;
                        float: left;
                        color: #345;
                    }
                    .q-order-divider-timing {
                        float: left;
                        position: relative;
                        margin-top: 2px;
                        margin-left: 1rem;
                        height: 10px;
                        width: 1.5px;
                        background-color: #cccccc;
                    }
                    .q-order-timing {
                        position: relative;
                        margin-left: 1rem;
                        font-size: 1.1rem;
                        float: left;
                        color: #345;
                    }
                }
            }
            .q-order-details {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                float: right;
                height: 20px;
                width: 20px;
                background: url("../../image/ic_details.png") no-repeat;
                background-size: contain;
            }
        }
    }
    .q-orders-status {
        position: relative;
        margin-top: 2rem;
        width: 42%;
        height: 60%;
        right: 3rem;
        float: right;
        background-color: #f3f3f3;
        overflow-y: auto;
        .q-order-rate {
            width: 100%;
            height: 5.5rem;
            background-color: #ffffff;
            box-shadow: 1px 1px 1px 1px #DBDBDB;
        }
        .q-order-info {
            position: relative;
            margin-top: 2rem;
            color: #ffffff;
            box-shadow: 1px 1px 1px 1px #DBDBDB;
            .q-order-item {
                width: 100%;
                background-color: #ffffff;
                display: flex;
                .q-order-item-info {
                    font-size: 1.3rem;
                    position: relative;
                    align-self: flex-start;
                    margin-left: 1rem;
                    color: #345;
                }
                .q-order-item-quantity {
                    font-size: 1.3rem;
                    position: relative;
                    align-self: flex-end;
                    margin-right: 1rem;
                    color: #345;
                }
            }
            .q-order-info-divider {
                position: absolute;
                margin-left: 5%;
                top: 0;
                width: 80%;
                border-bottom: 1px solid #e7e7e7;
            }
            .q-total-amount {
                width: 100%;
                height: 4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ffffff;
                .q-order-total-amount-text {
                    background-color: #345;
                    color: #333333;
                }
                .q-order-price {
                    position: relative;
                    margin-left: 2rem;
                    background-color: #789;
                    width: 20%;
                    color: #41C27F;
                }
            }
        }
    }
}

xyz.html

<div class='order-container'>
    <div class="q-background">
    </div>
    <div class="q-text">
        <div>ORDER HISTORY</div>
    </div>
    <div class="q-order-container">
        <div class="q-orders-div">
            <div class="orders-tile" ng-repeat="item in vm.orders" ng-click="vm.setOrderInfo(item)">
                <div class="q-order-divider" />
                <div class="q-order-icon"></div>
                <div class="q-order-foodtruck-info">
                    <div class="q-order-foodtruck-name">
                        {{item.foodtruck_id.foodtruck_name}}
                    </div>
                    <div class="q-order-time">
                        <div ng-switch="item.order_status">
                            <div style="color:#65A07C" class="q-order-status-text" ng-switch-when="0">
                                PLACED
                            </div>
                            <div style="color:#65A07C" class="q-order-status-text" ng-switch-when="1">
                                ACCEPTED
                            </div>
                            <div style="color:#65A07C" class="q-order-status-text" ng-switch-when="2">
                                COOKED
                            </div>
                            <div style="color:#F0B0B2" class="q-order-status-text" ng-switch-when="3">
                                CANCELLED
                            </div>
                        </div>

                        <div class="q-order-divider-timing">
                        </div>

                        <div class="q-order-timing">
                            {{item.order_time}}
                        </div>
                    </div>

                    <div class="q-order-details" />
                </div>
            </div>

        </div>

        <div class="q-orders-status">
            <div class="q-order-rate"></div>
            <div class="q-order-info" ng-model="vm.orderInfo">
                <div class="q-order-item" ng-repeat="item in vm.orderInfo.items">
                    <div class="q-order-item-info"> {{item.item_name}}</div>
                    <div class="q-order-item-quantity"> X {{item.item_quantity_ordered}}</div>
                </div>
                <div class="q-order-info-divider" />
                <div class="q-total-amount">
                    <div class="q-order-total-amount-text">TOTAL AMOUNT PAYABLE</div>
                    <div class="q-order-price"> $ {{vm.orderInfo.order_total}}</div>
                </div>
            </div>
        </div>
    </div>
</div>

订单历史
{{item.foodtruck\u id.foodtruck\u name}
放置
认可的
煮熟的
取消
{{item.order_time}
{{item.item_name}
X{{item.item{u订购数量}
应付总额
${{vm.orderInfo.order_total}

这是您的flex容器：

.q-order-item {
    display: flex;
    width: 100%;
}

以下是您的flex项目：

.q-order-item-info {
   align-self: flex-start;
}

.q-order-item-quantity {
   align-self: flex-end;
}

问题很清楚

flex容器上的初始设置是

flex direction:row

。这意味着弹性项目将水平排列

这也意味着主轴是水平的，横轴是垂直的

align self

属性仅在横轴上工作

因此，当您尝试将元素左对齐和右对齐时，

align self

尝试将元素上下对齐

不要使用

align self

，而是使用

justify content

属性，该属性用于在主轴上对齐

  .q-order-item {
    display: flex;
    width: 100%;
    justify-content: space-between; /* NEW */
  }

在此处了解有关主轴上的柔性对齐的更多信息：

在此处了解有关横轴上柔性对齐的更多信息：

---

您能否将css的布局更清晰一点，这样就更难理解了。。。为什么所有的浮子都是左的？摆脱他们。。。大多数元素将向左移动，除非另有明确编码。。