我试图在我的页面上用flexbox隔开三个div来填满整个屏幕宽度。当我将display: flex
和flex-direction: column
应用到body时,没有任何变化。所有的flex项目都保持在一起。添加justify-content: space-between
也没有解决任何问题。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Roboto, sans-serif;
}
img {
width: 600px;
}
button {
font-family: Roboto, sans-serif;
border: none;
border-radius: 8px;
background: #eee;
}
input {
border: 1px solid #ddd;
border-radius: 16px;
padding: 8px 24px;
width: 400px;
margin-bottom: 16px;
}
li {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
.header {
display: flex;
justify-content: space-between;
}
.left-links,
.right-links {
padding-left: 8px;
padding-right: 8px;
display: flex;
gap: 5px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.footer {
display: flex;
justify-content: space-between;
background-color: #eeeeee;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
个字符
1条答案
按热度按时间cfh9epnr1#
在您的例子中,
body
只有一个直接子节点,因此没有什么需要间隔的。一般来说,在
body
上应用flexbox并不是一个好主意,因为你有一个整体的容器,所以在上面使用flexbox。个字符