Search code examples
htmlcssflexboxalignment

Central autosizing column

How can I achieve a 3 column layout, where the central column auto-expands for the content but stays central, with the left and right columns shrinking as needed?

I'm told this can be done with flexbox but I can't find an example where this does what I need.

Solution

  • Give flex: 1 to the left and right flex items and flex: 0 0 auto (because default is 0 1 auto and you don't want the flex-shrink value to be 1) for the middle flex item - see demo below:

    .wrapper {
  display: flex;
}

.wrapper>* {
  border: 1px solid;
  flex: 1;
}

.middle {
  flex: 0 0 auto;
}
    <div class="wrapper">
  <div>left</div>
  <div class="middle">Lorel ipsum</div>
  <div>right</div>
</div>