Html Question posted in
Some basic documentation can be found here.

Html – Stop flexbox from altering child dimensions in any way

I have the following markup on my page:

<h1 id="some-fragment">
    <a href="#some-fragment" class="fragment-link">
        <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">
          <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
              <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
    </a>
    Header text 
    <code>Ooh, a code block</code>
</h1>

with the following CSS:

/* irrelevant to this, but looks better */
a {
  text-decoration: none
}

h1 {
  display: flex;
  align-items: center;
}

svg {
  display: block;
}

code {
  padding: 2px 4px;
  background: #888;
  border-radius: 4px;
}

What I want to do is vertically align the icon next to the header text, but when I add display: flex, the code block looks super goofy. It gets crushed against the header text, losing the spacing following "text", and it seems to grow & get vertically off center, compared to the text. No combination of flex-grow: 0 has seemed to have an effect here.

I just want this to look identical to how it was w/out display: flex, but with the icon centered next to it.

Edit: I’m looking for CSS fixes, markup can’t be adjusted really. The header text ("Header text " & ) are one item, can’t be split up.

Tags:

2

Answers


  1. 0

    Edited to handle additional criteria of not being able to edit the HTML on the page.

    I’ve added a gap property to space the elements better. Additonal horizontal spacing can be handled via margins & padding.

    I’ve aligned the elements center, but then applied a "self" style to the code align-self: flex-end that overrides the center alignment of the parent.

    a {
  text-decoration: none
}

h1 {
  display: flex;
  align-items: center;
  gap: 5px;

}

svg {
  display: block;
}

code {
  padding: 2px 4px;
  background: #888;
  border-radius: 4px;
  align-self: flex-end;

}
    <h1 id="some-fragment">
  <a href="#some-fragment" class="fragment-link">
    <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">
      <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
      <line x1="8" y1="12" x2="16" y2="12"></line>
    </svg>
  </a>
  Header text
  <code>Ooh, a code block</code>
</h1>

    Probably the best flexbox resource is here: Flexbox Tips and Tricks

    Login or Signup to reply.
  2. 0

    I have a solution for you but it does not make use of flexbox so I don’t know if that is what you are looking for exactly.

    CSS:

    a {
    text-decoration: none
}

/*Removed Flexbox on h1*/

svg {
    display: inline-block;
    /*Converted the svg displpay type from block to inline-block*/
}

code {
    padding: 2px 4px;
    background: #888;
    border-radius: 4px;
}

    The svg which you have made is aligned with the h1 heading and the padding given to the code block is preserved as well. It is only that flexbox is not being used.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search