Clever Geek Handbook

How to center 2 rows using flexbox?

Hello, I have the following bit of code, but I am trying to figure out the layout issue. Ideally, I would like the lines to move from left to right as shown in the picture, but I would like to focus the entire structure.

Currently enter image description here

But I would like enter image description here

This is the css and the code I am currently using.

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 20px;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

Can flexbox be used to achieve what I want? Thanks to

+3


source to share


2 answers


You need to use flex-basis: 30%;

insteadflex-basis: 300px; 



.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 1.5%;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}
      

        
        
        
      

    
<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>
Run codeHide result


+2


source 


.service_tab { flex-grow: 1; }

instead

.service_tab { flex-grow: 1; }

      

        
        
        
      

    


.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 20px;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}
      

        
        
        
      

    
<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>
Run codeHide result


0


source






More articles:


All Articles