我正在为我的网站添加页脚,并且正在使用flexbox进行布局。这是我的页脚的CSS:
.footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 5vh;
background-color: transparent;
color: white;
text-align: center;
}
它看起来像这样:
它们之间有很多空间。如何减少空间?
如果您需要更多信息,请发表评论。
谢谢!
答案 0 :(得分:3)
使用flexbox的justify-content
规则,您可以控制菜单项之间的空格
.footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
您也可以使用justify-content: center
或justify-content: space-around
答案 1 :(得分:1)
您可以使用justify-content: space-around;
,它将像这样在开头和结尾分配空间:
.footer {
display: flex;
justify-content: space-around;
}
<div class="footer">
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</div>
如果这不符合您的要求,请使用容器并为其设置最大宽度,然后margin: auto
使其居中:
.content-footer {
display: flex;
justify-content: space-between;
max-width: 60%;
margin: auto;
}
<div class="footer">
<div class="content-footer">
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</div>
</div>