skip to Main Content

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

2

Answers


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