'flex container is reversing items

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;
}
htmlcss


Solution 1:[1]

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.

Solution 2:[2]

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;
}

Solution 3:[3]

if your code make it reverse. then adding reverse make it reverse again going back to normal:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 suha.kesikbas
Solution 2 Andriy Lozynskiy
Solution 3 Mikael Tenshio

Related Questions