使用 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>