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

Html – How to Move a Flexbox Child Element to the Left Without Affecting Other Elements?

I’m a student working on a responsive header layout using flexbox, and I’m encountering an issue. When I try to move the logo to the left by a few pixels using ‘margin-right’, it also affects the positioning of the other elements. I want the navigation elements and the other link to remain in their positions.

Please ignore the borders, as they are there for my understanding.

* {
  border: 1px solid black;
  box-sizing: border-box;
}

header {
  display: flex;
  padding: 20px 0;
  font-family: sans-serif;
  justify-content: space-around;
}

.logo {
  color: rgb(31, 31, 58);
  margin-right: 20px;
}
<body>
  <header>
    <div class="logo">Logo</div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </nav>
    <div class="Download"><a href="#">Download</a></div>
  </header>
</body>

I tried moving the logo to the left using the ‘margin-right’ property and also tried ‘padding-right’. In both cases, the logo moves to the left, but the other elements also shift from their positions.

I know I can use the ‘position: relative’ property, but I believe it’s not the best approach for a responsive website.

Tags:

2

Answers


  1. 0

    .logo {translate: -your px, 0); A transform is purely visual and does not affect layout.

    translate

    The translate CSS property allows you to specify translation transforms individually and independently of the transform property.

    * {
  border: 1px solid black;
  box-sizing: border-box;
}

header {
  display: flex;
  padding: 20px 0;
  font-family: sans-serif;
  justify-content: space-around;
  margin-bottom: 1em;
}

.logo {
  color: rgb(31, 31, 58);
}

.moved .logo {
  translate: -20px 0;
  background: lightblue;
}
    <header>
  <div class="logo">Logo</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>
  </nav>
  <div class="Download"><a href="#">Download</a></div>
</header>



<header class="moved">
  <div class="logo">Logo</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>
  </nav>
  <div class="Download"><a href="#">Download</a></div>
</header>
    Login or Signup to reply.
  2. 0

    Since adding a margin to the right makes the element "wider" in the flow what you MAY have intended is to move the element to the left half the amount so 10px and that is 10/16 for the default 16px font size on most modern browsers we can use and em so 10/16 = 0.625 so use -0.625em to move it that much to the left here.

    I put TWO header elements and hacked the logo class just for a visual reference of the after with the unchanged element flex.

    body {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

header {
  display: flex;
  padding: 1.25em;
  font-family: sans-serif;
  justify-content: space-around;
}

header>* {
  border: 1px solid #00ff00;
}

.logo {
  color: rgb(31, 31, 58);
  transform: translate( -0.625em);
}

.margined-logo {
  color: rgb(31, 31, 58);
  margin-right: 20px;
}
    <body>
  <header>
    <div class="logo">Logo</div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </nav>
    <div class="Download"><a href="#">Download</a></div>
  </header>
  not moved logo:just to allow a compare to the above changed one
  <header>
    <div class="xlogo">Logo</div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </nav>
    <div class="Download"><a href="#">Download</a></div>
  </header>
  and the original margin:
  <header>
    <div class="margined-logo">Logo</div>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </nav>
    <div class="Download"><a href="#">Download</a></div>
  </header>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search