CODEWITHSUNDEEP
csssvgflexbox
PrismaPixel Studios
PrismaPixel Studios

Reputation: 247

Aligning SVGs using flex

I'm using flex to layout a menu for a website and I'm having a heck of a time trying to align an SVG to the right. I'm not sure what I'm doing wrong because I'm using SVGs inside of flexboxes for my social icons and they're lining up proplerly.

Here is my code for the css and the structure:

.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>

This is what I am trying to get it to look like: enter image description here

Upvotes: 2

Views: 14125

Answers (1)

Bernhard
Bernhard

Reputation: 476

There are a few things you should watch out when using flexbox.

If you are trying to align the SVG's to the right the most important thing would be to remove the the last div with class="blank". In general it is actually a bad practice to use empty div's for styling as you can do it with css (especially if you are using flexbox).
If you want to style specific child elements use the appropriate css properties.

There is a really great guide on how to use flexbox layout.


But let's continue with your code example:

I have stripped out unnecessary code from your snippet and modified the css to use the flexbox layout. If you want to align the SVG's to the left use justify-content: flex-start; and if they should be aligned to the right use justify-content: flex-end; in the class selector .seventh as provided in the example below.

.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>

Upvotes: 5

Related Questions