flex container is reversing items-CodePudding

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 >
        <div >Item 1</div>
        <div >Item 2</div>
        <div >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;
}

CodePudding user response：

If you use :nth-child() your problem will be solved.

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

The :nth-last-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name), counting from the end.

CodePudding user response：

dont make the code complex. just do this

    .flex-container {
        
        display: flex;
        flex-direction: row;
    }

.flex-container .item{
color:white; \\ to see the items
background:black;
}