Question 80281 in CSS Question posted in
Some basic documentation can be found here.

How to center first div, and have second div right next to it using flexbox – Css

So, I have a parent div with two childs. I need the first in the center, and the second at the right after some d distance. Can’t seem to find how to do it with flexbox.

<--------------------[First]-d-[Second]------------->
                        |
                      Center

What worked is centering the first div, and give an absolute position and right distance to the second. But I would like to do it with only flexbox (if possible).

I’ve tried setting a left-margin with percentage (47% for example), but it is not consistent with different screen sizes and the first div go out of center.

Auto margins and justify-content also cause the first div to not be in the center. (Since it centers both divs).

Tags:

2

Answers


  1. 0

    You can use margin if the width is known beforehand:

    #container {
  display: flex;
  justify-content: center;
  gap: var(--gap);
}

#first {
  margin-left: calc(var(--width) + var(--gap));
}

#second {
  width: var(--width);
}

    Try it:

    :root {
  --gap: 10px;
  --width: 50px;
}

#container {
  display: flex;
  justify-content: center;
  gap: var(--gap);
}

#first {
  margin-left: calc(var(--width) + var(--gap));
}

#second {
  width: var(--width);
}


/* Demo only */

#container {
  position: relative;
  outline: 1px solid black;
  height: 100px;
}

#first {
  width: 100px;
  background: #ddd;
}

#second {
  background: #ccc;
}

#center {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: calc(50% - 1px);
  background: #f00;
}
    <div id="container">
  <div id="first"></div>
  <div id="second"></div>
  <div id="center"></div>
</div>

    …or grid with its powerful grid-template-columns:

    #container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  gap: var(--gap);
}

#first {
  grid-column-start: 2;
}

    Try it:

    :root {
  --gap: 10px;
}

#container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  gap: var(--gap);
}

#first {
  grid-column-start: 2;
}


/* Demo only */

#container {
  position: relative;
  outline: 1px solid black;
  height: 100px;
}

#first {
  width: 100px;
  background: #ddd;
}

#second {
  background: #ccc;
  width: 50px;
}

#center {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: calc(50% - 1px);
  background: #f00;
}
    <div id="container">
  <div id="first"></div>
  <div id="second"></div>
  <div id="center"></div>
</div>
    Login or Signup to reply.
  2. 0

    You can also cheat a little. Create a third empty div on the left, and then use space-around or center with a gap.

    #container {
  display: flex;
  justify-content: space-around;
}

    or

    #container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search