Categories
css flexbox html

Center one and right/left align other flexbox element

304

I would like to have A B and C aligned in the middle.

How can I get D to go completely to the right?

BEFORE:

enter image description here

AFTER:

enter image description here

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

0

    417

    Below are five options for achieving this layout:

    • CSS Positioning
    • Flexbox with Invisible DOM Element
    • Flexbox with Invisible Pseudo-Element
    • Flexbox with flex: 1
    • CSS Grid Layout

    Method #1: CSS Positioning Properties

    Apply position: relative to the flex container.

    Apply position: absolute to item D.

    Now this item is absolutely positioned within the flex container.

    More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

    Use the CSS offset properties top and right to move this element into position.

    li:last-child {
      position: absolute;
      top: 0;
      right: 0;
      background: #ddd;
    }
    ul {
      position: relative;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    li {
      display: flex;
      margin: 1px;
      padding: 5px;
      background: #aaa;
    }
    p {
      text-align: center;
      margin-top: 0;
    }
    span {
      background-color: aqua;
    }
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <p><span>true center</span></p>

    One caveat to this method is that some browsers may not completely remove an absolutely-positioned flex item from the normal flow. This changes the alignment in a non-standard, unexpected way. More details: Absolutely positioned flex item is not removed from the normal flow in IE11


    Method #2: Flex Auto Margins & Invisible Flex Item (DOM element)

    With a combination of auto margins and a new, invisible flex item the layout can be achieved.

    The new flex item is identical to item D and is placed at the opposite end (the left edge).

    More specifically, because flex alignment is based on the distribution of free space, the new item is a necessary counterbalance to keep the three middle boxes horizontally centered. The new item must be the same width as the existing D item, or the middle boxes won’t be precisely centered.

    The new item is removed from view with visibility: hidden.

    In short:

    • Create a duplicate of the D element.
    • Place it at the beginning of the list.
    • Use flex auto margins to keep A, B and C centered, with both D elements creating equal balance from both ends.
    • Apply visibility: hidden to the duplicate D
    li:first-child {
      margin-right: auto;
      visibility: hidden;
    }
    li:last-child {
      margin-left: auto;
      background: #ddd;
    }
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    li {
      display: flex;
      margin: 1px;
      padding: 5px;
      background: #aaa;
    }
    p { text-align: center; margin-top: 0; }
    span { background-color: aqua; }
    <ul>
      <li>D</li><!-- new; invisible spacer item -->
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <p><span>true center</span></p>

    Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element)

    This method is similar to #2, except it’s cleaner semantically and the width of D must be known.

    • Create a pseudo-element with the same width as D.
    • Place it at the start of the container with ::before.
    • Use flex auto margins to keep A, B and C perfectly centered, with the pseudo and D elements creating equal balance from both ends.
    ul::before {
      content:"D";
      margin: 1px auto 1px 1px;
      visibility: hidden;
      padding: 5px;
      background: #ddd;
    }
    li:last-child {
      margin-left: auto;
      background: #ddd;
    }
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    li {
      display: flex;
      margin: 1px;
      padding: 5px;
      background: #aaa;
    }
    p { text-align: center; margin-top: 0; }
    span { background-color: aqua; }
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <p><span>true center</span></p>

    Method #4: Add flex: 1 to left and right items

    Starting with Method #2 or #3 above, instead of worrying about equal width for the left and right items to maintain equal balance, just give each one flex: 1. This will force them both to consume available space, thus centering the middle item.

    You can then add display: flex to individual items in order to align their content.

    NOTE about using this method with min-height: Currently in Chrome, Firefox, Edge and possibly other browsers, the shorthand rule flex: 1 breaks down to this:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: 0%

    That percentage unit (%) on flex-basis causes this method to break when min-height is used on the container. This is because, as a general rule, percentage heights on the children require an explicit height property setting on the parent.

    This is an old CSS rule dating back to 1998 (CSS Level 2) which is still in effect in many browsers to some degree or another. For complete details see here and here.

    Here’s an illustration of the problem posted in the comments by user2651804:

    #flex-container {
      display: flex;
      flex-direction: column;
      background: teal;
      width: 150px;
      min-height: 80vh;
      justify-content: space-between;
    }
    
    #flex-container>div {
      background: orange;
      margin: 5px;
    }
    
    #flex-container>div:first-child {
      flex: 1;
    }
    
    #flex-container::after {
      content: "";
      flex: 1;
    }
    <div id="flex-container">
      <div>very long annoying text that will add on top of the height of its parent</div>
      <div>center</div>
    </div>

    The solution is to not use the percentage unit. Try px or just nothing at all (which is what the spec actually recommends, despite the fact that at least some of the major browsers have appended a percentage unit for whatever reason).

    #flex-container {
      display: flex;
      flex-direction: column;
      background: teal;
      width: 150px;
      min-height: 80vh;
      justify-content: space-between;
    }
    
    #flex-container > div {
      background: orange;
      margin: 5px;
    }
    
    
    /* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */
    
    #flex-container > div:first-child {
      flex: 1;
      flex-basis: 0;
    }
    
    #flex-container::after {
      content: "";
      flex: 1;
      flex-basis: 0;
    }
    
    
    /* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY
    
    #flex-container > div:first-child {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
    
    #flex-container::after {
      content: "";
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
     */
    <div id="flex-container">
      <div>very long annoying text that will add on top of the height of its parent</div>
      <div>center</div>
    </div>

    Method #5: CSS Grid Layout

    This may be the cleanest and most efficient method. There is no need for absolute positioning, fake elements or other hackery.

    Simply create a grid with multiple columns. Then position your items in the middle and end columns. Basically, just leave the first column empty.

    ul {
      display: grid;
      grid-template-columns: 1fr repeat(3, auto) 1fr;
      grid-column-gap: 5px;
      justify-items: center;
    }
    
    li:nth-child(1) { grid-column-start: 2; }
    li:nth-child(4) { margin-left: auto; }
    
    /* for demo only */
    ul { padding: 0; margin: 0; list-style: none; }
    li { padding: 5px; background: #aaa; }
    p  { text-align: center; }
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <p><span>| true center |</span></p>

    3

    • “The new item must be the same width as the existing D item, or the middle boxes won’t be precisely centered.” – that sucks that it must be the same width, but thank god for CSS grid 🙂

      – Vucko

      Nov 7, 2018 at 14:46

    • Using the Grid technique, the items aren’t in the dead centre, is there a way to get the logo element to be dead in the centre? imgur.com/a/SVg9xsj

      – J86

      Nov 19, 2019 at 11:37

    • To get the Grid layout method to work on the vertical axis, besides the obvious, it needs only one extra line: stackoverflow.com/questions/72440616/…

      May 31 at 23:40


    42

    The simplest solution will be to justify-content center to the parent container and giving margin-left auto to first and last child element.

    ul {
      display:flex;
      justify-content:center;
    }
    
    
    .a,.d {
      margin-left:auto;
    }
    <ul>
      <li class="a">A</li>
      <li>B</li>
      <li>C</li>
      <li class="d">D</li>
    </ul>

    2

    • @RedGuy11 can you share what you did?

      Aug 23, 2021 at 5:29

    • 2

      Unfortunately A/B/C will be centred within the remaining space by this method. In other words, even if there’s room for them to be centred with respect to the full width, they won’t be.

      – tremby

      Oct 23, 2021 at 0:26

    7

    Most easy way

    .box{
      display:flex;
      justify-content:center;
    }
    .item1{
       flex:1;
       display: flex;
       justify-content: center;
       transform: translateX(10px);/*D element Width[if needed]*/
    }
     <div class="box">
       <div class="item1">
          <div>A</div>
          <div>B</div>
          <div>C</div>
       </div>
       <div class="item2">D</div>
     </div>

    1

    • 10

      Needing to use the exact px width of the element could be problematic

      – Drenai

      Feb 19, 2021 at 21:22