使用flex对齐SVG

Question

我正在使用flex来为网站布局菜单，而我正试图将SVG对齐到右边。我不确定我做错了什么因为我在flexboxes中使用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。一般来说，它实际上是bad practice to use empty div's用于样式设置，因为你可以使用css（特别是如果你使用的是flexbox）。
如果要为特定的子元素设置样式，请使用适当的css属性。

有一个非常棒的guide on how to use 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>