How to fix flex direction to row

Question

I have a little problem, when a use display flex in the main container for some reason does not work.

The flex direction is always in column. I am already looking for solutions of all kinds and I can't find one that works for me. Maybe it could be a silly mistake and I'm not realizing it, I ask for help with this.

    .box-container a{
        color: var(--goatred-color);
    }
    
    .box-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background: #ccc;
    }
    
    .box{
        flex: 1 1 300px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
        margin: 20px;
    }
    
    .box .image{
        padding: 10px;
        background: #eee;
        text-align: center;    
    }
    
    .box .image img{
        height: 200px;
        width: 250px;
        object-fit: cover;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
    }
    
    
    .box .title .info{
        padding: 10px;
        color: #666;
        font-size: 20px;
    }
    
    .box .info .subInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 10px;
    }


            
            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            


            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            


            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            


            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900

user_1046690 · Answer

Two problems:

You had one box element, I believe your intention is to have many boxes as elements which behave like rows. I added this HTML fix.
I slightly modified the padding of the content to be left aligned, see how the title of each box and the price were not left aligned.

If you agree with the solution then great. If you disagree I kindly ask you to look over the changes and try to modify it to your needs.

Note: expand the snippet to full width, you specified flex boxes 300px wide so you need to see it in a wider screen size.

.box-container a {
    color: var(--goatred-color);
}
    
    .box-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background: #ccc;
    }
    
    .box{
        flex: 1 1 300px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
        margin: 20px;
    }
    
    .box .image{
        padding: 10px;
        background: #eee;
        text-align: center;    
    }
    
    .box .image img{
        height: 200px;
        width: 250px;
        object-fit: cover;
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
    }
    
    
    .box .info{
        padding: 10px;
        color: #666;
        font-size: 20px;
    }
    
    .box .info .subInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }



        
            
            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            
        

        
            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            
        

        

            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900
                    
                        
                        
                        
                        
                        
                    
                
            

            
                
                
                
            
        

        

            
                
            

            
                Goat Esports Jersey 2020
                
                    ₡14.900

How to fix flex direction to row

1 Answers