CSS 弹性盒子。 Flexbox 初学者

Question

我正在尝试为我的网站创建一个 'skills' 部分。为此，我正在使用 CSS flexbox。我想让我的网页根据浏览器的标签大小进行调整。所以我尝试使用各种 CSS Flexbox 属性。

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>

当我运行这段代码时，它按我预期的那样工作。

但是，当我调整浏览器大小时，它看起来像这样：

我想知道的是，为什么第二列只有两行，第一列和第三列有三行。另外，如果我想将具有 2 行的列发送到末尾，而具有 3 行的列应该在开头，那么我该怎么做？

Answer 1

间距是由 justify-content:space-between; 在 #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>

CSS 弹性盒子。 Flexbox 初学者

CSS Flexbox. Beginner in Flexbox

html

css

flexbox

web-frontend