CSS 弹性盒子。 Flexbox 初学者
CSS Flexbox. Beginner in Flexbox
我正在尝试为我的网站创建一个 '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 行的列应该在开头,那么我该怎么做?
间距是由 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>
我正在尝试为我的网站创建一个 '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 行的列应该在开头,那么我该怎么做?
间距是由 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>