Search code examples
htmlcssflexboxweb-frontend

CSS Flexbox. Beginner in Flexbox

I am trying to make a 'skills' section for my website. I am using CSS flexbox for that. I want to make my webpage adjust according to the tab size of the browser. So I tried doing it using various CSS Flexbox Properties.

section{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:center;
}

/*Skills Section*/
#skills{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    width:90%;
    padding:10px;
}

#skill-container{
    display:flex;
    justify-content:space-between;
    width:190px;
    height:20px;
    border:1px solid black;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    margin:20px;
    background-color:lightgray;
}

#skill-indicator{
    display:flex;
    justify-content:space-between;
    width:80%;
    height:inherit;
    background-color:purple;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    margin-top:0px;
}

#skill-indicator span{
    color:white;
    display:inline-block;
    margin-left:50px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>
            Skills
        </title>
        <link rel="stylesheet" type="text/css" href="skills.css">
    </head>
    <body>
        <section id="skills">
                <div id="skill-container">
                      <div id="skill-indicator">
                          <span>C++</span>
                      </div>
               </div>
               <div id="skill-container">
                     <div id="skill-indicator">
                         <span>HTML</span>
                     </div>
               </div>
               <div id="skill-container">
                     <div id="skill-indicator">
                         <span>CSS</span>
                     </div>
               </div>
               <div id="skill-container">
                    <div id="skill-indicator">
                         <span>Javascript</span>
                    </div>
               </div>
                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>Data Structures</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>Algorithms</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>MySQL</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>SQL</span>
                     </div>
                </div>
        </section>
    </body>
</html>

When I run this code it works as I expected.

enter image description here

However, when I resize my Browser, it looks like this:

enter image description here

All I want to know is, Why only two rows are there in second column and three rows on 1st and 3rd columns. Also if I want to send the column having 2 rows to the end and the columns having 3 rows should be at the beginning, then how can I do that ?

Solution

  • The spacing is caused by justify-content:space-between; on #skill div

    section{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:center;
}

/*Skills Section*/
#skills{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    width:90%;
    padding:10px;
}

#skill-container{
    display:flex;
    justify-content:space-between;
    width:190px;
    height:20px;
    border:1px solid black;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    margin:20px;
    background-color:lightgray;
}

#skill-indicator{
    display:flex;
    justify-content:space-between;
    width:80%;
    height:inherit;
    background-color:purple;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    margin-top:0px;
}

#skill-indicator span{
    color:white;
    display:inline-block;
    margin-left:50px;
}
    <!DOCTYPE html>
<html>
    <head>
        <title>
            Skills
        </title>
        <link rel="stylesheet" type="text/css" href="skills.css">
    </head>
    <body>
        <section id="skills">
                <div id="skill-container">
                      <div id="skill-indicator">
                          <span>C++</span>
                      </div>
               </div>
               <div id="skill-container">
                     <div id="skill-indicator">
                         <span>HTML</span>
                     </div>
               </div>
               <div id="skill-container">
                     <div id="skill-indicator">
                         <span>CSS</span>
                     </div>
               </div>
               <div id="skill-container">
                    <div id="skill-indicator">
                         <span>Javascript</span>
                    </div>
               </div>
                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>Data Structures</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>Algorithms</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>MySQL</span>
                     </div>
                </div>

                <div id="skill-container">
                    <div id="skill-indicator">
                        <span>SQL</span>
                     </div>
                </div>
        </section>
    </body>
</html>