Why align-self does not align items left and right?

Question

Now what I want here is .q-order-item-info to be on the left side and .q-order-item-quantity to be on the right side, but somehow it does not happen, so what should I do to make it work?

My code is as shown below:

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>

can you lay out your css a little more clearly, like that it's more difficult to follow... and why all the float lefts? get rid of them... most elements will go left unless specifically otherwise coded to.. — Rachel Gallen, May 15 '17 at 11:04

score 5 · Accepted Answer · edited May 23 '17 at 11:54

This is your flex container:

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

These are your flex items:

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

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

The problem is pretty clear.

An initial setting on a flex container is flex-direction: row. This means that flex items will line up horizontally.

It also means that the main axis is horizontal and the cross axis is vertical.

The align-self property works only on the cross axis.

So while you're trying to align your elements left and right, align-self is trying to align your elements top and bottom.

Instead of align-self, use the justify-content property, which is designed for alignment on the main axis.

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

Learn more about flex alignment on the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment on the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Why align-self does not align items left and right?

1 Answers1