flex container is reversing items

April 28, 2022

I have a flex-container with three items and the flex-direction set to row. I put different sizes for each of the three boxes so that they’re in an ascending order. item 1 should be 100px, item 2 is 400px, item 3 should be 800px. When I run this, its in reverse. Why is this in reverse and how do I make it not reverse?

https://codepen.io/sgtsnoots/pen/XWgPZbE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div class="flex-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
   
        
    </div>
    <h1>hello</h1>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    font-family: Arial, Helvetica, sans-serif
}

.flex-container {
    
    display: flex;
    flex-direction: row;
    background-color: #aaa;
    

    /*always on the main access X axis */
    /* justify-content: start; */

    /*always on the cross access Y axis*/
    /* align-items: flex-start; */
    /* flex-wrap: wrap; */

}

.item {
    background: #254de4;
    color: #fff;
    /* flex-basis: 100px; */
    
    height: 100px;
    
    
    /* margin: 10px; */
    /*same thing for above, but for div contents*/
    border: 2px solid magenta;
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin: 10px;
}

.item:nth-last-of-type(1){
    flex-basis: 100px;
}
.item:nth-last-of-type(2){
    flex-basis: 400px;

}

.item:nth-last-of-type(3){
    
    flex-basis: 800px;
}