CSS - Flexbox (nth-child)

Page 22

#box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border: 2px solid purple;
}

.box_element:nth-child(1) {
    background-color: rgba(255, 0, 0, 0.5);
}

.box_element:nth-child(2) {
    background-color: rgba(0, 255, 0, 0.5);
    align-self: flex-end;
}

.box_element:nth-child(3) {
    background-color: rgba(0, 0, 255, 0.5);
}



.box_element:nth-child(1) {
    order: 2;
}

.box_element:nth-child(2) {
    order: 1;
}

.box_element:nth-child(3) {
    order: 3;
}



.box_element:nth-child(1) {
    flex: 1;
}

.box_element:nth-child(2) {
    flex: 2;
}

.box_element:nth-child(3) {
    flex: 1;
}
        
Element 1
Element 2
Element 3
Element 1
Element 2
Element 3
Element 1
Element 2
Element 3