使用 flex 对齐 SVG

Question

我正在使用 Flex 来布局网站的菜单，并且在尝试将 SVG 向右对齐时遇到了很大的麻烦。我不确定我做错了什么，因为我在 Flexbox 内使用 SVG 作为我的社交图标，并且它们排列得正确。

这是我的 css 和结构代码：

.seventh {
  display: flex;
  width: 100%;
  height: calc(100% / 7);
  overflow: hidden;
  margin: auto;
}
div.link,
div.blank {
  display: flex;
  justify-content: flex-end;
  width: 46.25%;
  height: 100%;
  position: relative;
  flex-flow: column nowrap;
  overflow: hidden;
  margin-right: 0;
}
.svgLink.left {
  display: block;
  margin-right: 0;
  height: 100%;
}

<section id="blue" class="seventh">
  <div class="link">
    <svg class="svgLink left" viewBox="0 0 431.1 73.1">
      <text transform="matrix(1 0 0 1 -0.2852 63.7813)" font-family="'Panton_xbk'" font-size="74.5982px">MARKETING</text>
    </svg>
  </div>
  <div class="pixel">
    <svg class="pixel" viewBox="0 0 512 512">
      <circle cx="256" cy="256" r="250" class="vf6"></circle>
    </svg>
  </div>
  <div class="blank"></div>
</section>

这就是我试图让它看起来像这样：

Answer 1

使用 Flexbox 时需要注意一些事项。

如果您尝试将 SVG 向右对齐，最重要的事情是删除最后一个带有 class="blank" 的 div。一般来说，使用空 div进行样式设置实际上是一种不好的做法，因为您可以使用 css 来做到这一点（特别是如果您使用的是 Flexbox）。
如果您想设置特定子元素的样式，请使用适当的 css 属性。

有一个关于如何使用 Flexbox布局的非常好的指南。

但让我们继续您的代码示例：

我已经从您的代码片段中删除了不必要的代码，并修改了 css 以使用 Flexbox 布局。如果您想将 SVG 向左对齐，请使用类选择器justify-content: flex-start;，如果它们应该向右对齐，请使用justify-content: flex-end;类选择器.seventh，如下例所示。

.seventh {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  overflow: hidden;
  margin: auto;
}

div.link {
  width: 46.25%;
}

div.pixel {
  width: 7.5%;
}

div.pixel>svg {
  height: 100%;
}

<section id="blue" class="seventh">
  <div class="link">
    <svg class="svgLink left" viewBox="0 0 451.1 73.1">
        <text transform="matrix(1 0 0 1 -0.2852 63.7813)" font-family="'Panton_xbk'" font-size="74.5982px">MARKETING</text>
    </svg>
  </div>
  <div class="pixel">
    <svg viewBox="0 0 512 512">
      <circle cx="256" cy="256" r="250" class="vf6"></circle>
    </svg>
  </div>
</section>