如何调整flex容器中沿主轴的项目之间的空间答案

【问题标题】：How to adjust space between items along the main axis in a flex cotainer如何调整flex容器中沿主轴的项目之间的空间
【发布时间】：2021-11-06 18:11:42
【问题描述】：

我正在尝试减少 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">&#11033;</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;
}

【问题讨论】：

在 Chrome 中，margin-block 属性会自动添加到 h1 标签中。看看在你的 CSS 中添加“h1 {margin-block: 0}”是否能解决你的问题。
请看我添加的图片。我正在尝试减少网站标题和上面的行之间的边距。您的解决方案不起作用@JuanManuelLópezManzano
嗨蒂姆，也许你可以减少行高

标签： html css flexbox

【解决方案1】：

我认为您的问题与 CSS flex 属性无关。你可以在你的 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;
}

【讨论】：

【解决方案2】：

您可以通过多种方式实现这一目标。

将margin-top 或margin-bottom; 添加到要添加空间的位置。
当你添加 display: flex 和 flex-direction: column，然后使用 justify-content: space-between;

希望这对你有用。

【讨论】：