[英]How to adjust space between items along the main axis in a flex cotainer
我试图减少 flex 容器中 (header__title-title) 和第一项 (header__title-symbol) 之间的边距。 我似乎什么都做不了。 有什么建议? 主轴是垂直的,因为我将 flex-direction 设置为 column
<div class="header__title">
<div class="header__title-symbol">
<span class="span-one"><hr id="hr-one" /></span>
<span id="symbol">⬙</span>
<span class="span-two"><hr id="hr-two" /></span>
</div>
<div class="header__title-title">
<h1>The Website title!</h1>
</div>
</div>
.header__title {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header__title-title {
letter-spacing: 4px;
color: white;
font-size: 2.5rem;
text-shadow: 0 4px 4px #d19224;
animation-name: moveInLeft;
animation-duration: 1s;
font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.header__title-symbol {
display: flex;
flex-direction: row;
align-items: center;
}
hr {
width: 27rem;
display: inline-block;
height: 0.3rem;
background-color: white;
}
我觉得你的问题不涉及到CSS弯曲性能。 您可以在 CSS 文件中添加这些行:
*, *::after, *::before { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
此代码重置html文件中所有元素的边距和填充。 然后,您可以为适合您的设计的.header__title-title
类设置您想要的每个边距或填充量。 例如:
.header__title-title { padding-top: 20px; }
有多种方法可以实现这一目标。
margin-top
或margin-bottom;
到您想要添加空间的那些。justify-content: space-between;
希望这对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.