在嵌套 flexbox 中的 flex 项目之间创建 space
Creating a space between flex items in nested flexbox
我有一个嵌套的弹性盒子结构,但是弹性项目之间没有间隙。
<div class = "navbar-container">
<a href="index.html">
<div class = "logo">
<img src="./media/logo.svg" alt = " logo" height = "80px" width="80">
</div>
</a>
<ul class = "nav-links">
<li class = "nav-link">
<a href="#">Install</a>
</li>
<li class = "nav-link">
<a href="#">Learn</a>
</li>
<li class = "nav-link">
<a href = "#">item</a>
</li>
<li class = "nav-link">
<a href = "#">item</a>
</li>
<li class = "nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
在我的 css 体内,我尝试使用 justify-content
属性 但它不起作用。
.navbar-container{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links{
display: flex;
justify-content:space-between;
}
设置 nav-links 的宽度或使用 column-gap
.navbar-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links {
width: 300px;
// column-gap: 30px;
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="navbar-container">
<a href="index.html">
<div class="logo">
<img src="./media/logo.svg" alt=" logo" height="80px" width="80">
</div>
</a>
<ul class="nav-links">
<li class="nav-link">
<a href="#">Install</a>
</li>
<li class="nav-link">
<a href="#">Learn</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
</body>
</html>
您可以在 .nav-links
class 中使用 column-gap: 35px;
。 Read this
或
您可以在 li.nav-link
中添加 padding-left:35px;
。
.nav-links {
display: flex;
justify-content: space-between;
column-gap: 35px;
}
我最近不得不为客户重组大部分代码,因为我在网站上用 gap
在 flex
结构中构建了许多组件,并且他们使用的是浏览器不支持它。
gap
在所有现代浏览器中都支持 flex
,但由于某些原因不如 gap
支持 grid
。希望它很快就会得到全面支持。
flex-gap
支持:https://caniuse.com/?search=flex-gap
grid-gap
支持:https://caniuse.com/?search=grid-gap
仅出于这个原因,我还想提出一个与 padding-right
实现相同的解决方案。不过,您很可能会通过使用 gap
来度过难关。下面的代码将为除最后一个之外的所有 nav-link
元素提供 padding
。
.navbar-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-link:not(:last-child) {
padding-right: 30px;
}
<div class="navbar-container">
<a href="index.html">
<div class="logo">
<img src="./media/logo.svg" alt=" logo" height="80px" width="80">
</div>
</a>
<ul class="nav-links">
<li class="nav-link">
<a href="#">Install</a>
</li>
<li class="nav-link">
<a href="#">Learn</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
我有一个嵌套的弹性盒子结构,但是弹性项目之间没有间隙。
<div class = "navbar-container">
<a href="index.html">
<div class = "logo">
<img src="./media/logo.svg" alt = " logo" height = "80px" width="80">
</div>
</a>
<ul class = "nav-links">
<li class = "nav-link">
<a href="#">Install</a>
</li>
<li class = "nav-link">
<a href="#">Learn</a>
</li>
<li class = "nav-link">
<a href = "#">item</a>
</li>
<li class = "nav-link">
<a href = "#">item</a>
</li>
<li class = "nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
在我的 css 体内,我尝试使用 justify-content
属性 但它不起作用。
.navbar-container{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links{
display: flex;
justify-content:space-between;
}
设置 nav-links 的宽度或使用 column-gap
.navbar-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links {
width: 300px;
// column-gap: 30px;
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="navbar-container">
<a href="index.html">
<div class="logo">
<img src="./media/logo.svg" alt=" logo" height="80px" width="80">
</div>
</a>
<ul class="nav-links">
<li class="nav-link">
<a href="#">Install</a>
</li>
<li class="nav-link">
<a href="#">Learn</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
</body>
</html>
您可以在 .nav-links
class 中使用 column-gap: 35px;
。 Read this
或
您可以在 li.nav-link
中添加 padding-left:35px;
。
.nav-links {
display: flex;
justify-content: space-between;
column-gap: 35px;
}
我最近不得不为客户重组大部分代码,因为我在网站上用 gap
在 flex
结构中构建了许多组件,并且他们使用的是浏览器不支持它。
gap
在所有现代浏览器中都支持 flex
,但由于某些原因不如 gap
支持 grid
。希望它很快就会得到全面支持。
flex-gap
支持:https://caniuse.com/?search=flex-gap
grid-gap
支持:https://caniuse.com/?search=grid-gap
仅出于这个原因,我还想提出一个与 padding-right
实现相同的解决方案。不过,您很可能会通过使用 gap
来度过难关。下面的代码将为除最后一个之外的所有 nav-link
元素提供 padding
。
.navbar-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-link:not(:last-child) {
padding-right: 30px;
}
<div class="navbar-container">
<a href="index.html">
<div class="logo">
<img src="./media/logo.svg" alt=" logo" height="80px" width="80">
</div>
</a>
<ul class="nav-links">
<li class="nav-link">
<a href="#">Install</a>
</li>
<li class="nav-link">
<a href="#">Learn</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
</ul>
</div>