Выравнивание SVG с использованием flex

Question

Я использую flex для разметки меню для веб-сайта, и у меня есть куча времени, пытаясь выровнять SVG вправо.Я не уверен, что я делаю не так, потому что я использую 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 по правому краю, самым важным будет удалить последний div с помощью class = "blank". В общем, на самом деле это плохая практика - использовать пустой div'ы для стилизации, как вы можете сделать это с помощью css (особенно если вы используете flexbox).
Если вы хотите стилизовать определенные дочерние элементы, используйте соответствующие свойства css.

Существует действительно замечательное руководство по использованию flexbox layout.

Но давайте продолжим с вашим примером кода :

Я удалил ненужный код из вашего фрагмента и изменил 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>