[英]CSS grid and flex box alignment issues
所以我正在制作这个布局,我无法正确对齐标题我想移动按钮并前往红色框在此处输入图像描述
代码如下:
<div class="main">
<div class="header">
<h1 class="notes__title">Notes</h1>
<button class="notes__create">Create</button>
</div>
<div class="notes">
<div class="note">
<h3 class="note__title">Note Title</h3>
<div class="note__body">Text....</div>
</div>
</div>
和 CSS
.main {
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin: 10px 0px;
}
.notes__title {
color: #fff;
}
.notes {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
请帮忙
您正在使用 space-around ,这就是导致您看到的效果的原因。
尝试:
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
max-width: 1200px;
}
好的,所以我这样做了,尽管我对解决方案不满意,但它确实有效,我只想使用 flex box 来实现它#
.main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
我能想到的最简单的解决方案是使用 bootstrap cols 并使用 Notes 和 Button 之间的空格到达正确的位置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.