Aligning elements left and center with flexbox

by

Add third empty element:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

And the following style:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Only left and right are set to grow and thanks to the facts that…

  • there are only two growing elements (doesn’t matter if empty) and
  • that both get same widths (they’ll evenly distribute the available space)

…center element will always be perfectly centered.

This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).

In action:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}
<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

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. Why are flex items not wrapping?
  7. Align an element to bottom with flexbox
  8. Make background color extend into overflow area
  9. Center text over an image in flexbox
  10. Force flex item to span full row width
  11. Why can’t be flex containers?
  12. Prevent flex items from rendering side to side
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. What’s the difference between flex-start and baseline?
  15. ‘position: sticky’ not working when ‘height’ is defined
  16. Flexbox column-reverse in Firefox, Edge and IE
  17. Text not centered with justify-content: center
  18. Flexbox affects overflow-wrap behavior
  19. How to stretch flex child to fill height of the container?
  20. How to align flexbox columns left and right?
  21. Flexbox resize and scrollable overflow [duplicate]
  22. How can I show three columns per row?
  23. CSS object-fit: contain; is keeping original image width in layout
  24. How to center horizontally and vertically?
  25. Flexbox on IE11: image stretched for no reason?
  26. extra space when centering elements using flexbox
  27. Height is not correct in flexbox items in Chrome [duplicate]
  28. display: flex not working on Internet Explorer [duplicate]
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment