How to center-align one flex item and right-align another using Flexbox [duplicate]

by

Using justify-content: space-between with an invisible flex item, as described in your question, is a good way to achieve the layout you want. Just note that the middle item can only be centered if both left and right items are equal length (see demo).

Another solution you may want to consider involves auto margins and absolute positioning. Two benefits of this method are no need for extra mark-up and true centering can be achieved regardless item sizes. One drawback is that the centered item is removed from the document flow (which may or may not matter to you).

.flexcontainer {
  display: flex;
  justify-content: flex-start;
  /* adjustment */
  position: relative;
  /* new */
  width: 500px;
  height: 200px;
}

.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
  position: absolute;
  /* new */
  left: 50%;
  transform: translateX(-50%);
}

.itemright {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  margin-left: auto;
  /* new */
}
<div class="flexcontainer">
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

More details here: Methods for Aligning Flex Items along the Main Axis (see boxes #62-78).

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Make grid container fill columns not rows
  7. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  8. Align an element to bottom with flexbox
  9. Make background color extend into overflow area
  10. Center text over an image in flexbox
  11. Force flex item to span full row width
  12. Why can’t be flex containers?
  13. Prevent flex items from rendering side to side
  14. Flexbox and Internet Explorer 11 (display:flex in ?)
  15. What’s the difference between flex-start and baseline?
  16. ‘position: sticky’ not working when ‘height’ is defined
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Text not centered with justify-content: center
  19. Flexbox affects overflow-wrap behavior
  20. How to stretch flex child to fill height of the container?
  21. How to align flexbox columns left and right?
  22. Flexbox resize and scrollable overflow [duplicate]
  23. How can I show three columns per row?
  24. CSS object-fit: contain; is keeping original image width in layout
  25. How to center horizontally and vertically?
  26. Flexbox on IE11: image stretched for no reason?
  27. extra space when centering elements using flexbox
  28. Height is not correct in flexbox items in Chrome [duplicate]
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment