现在我想要的是 .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>
答案 0 :(得分：3)
这是你的灵活容器：
.q-order-item {
display: flex;
width: 100%;
}
这些是你的弹性项目：
.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 */
}
在此处了解有关主轴上的柔性对齐的更多信息：
在此处了解有关十字轴上的柔性对齐的详情：