How can I have two fixed width columns with one flexible column in the center?

by

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

  • 0 = don’t grow (shorthand for flex-grow)
  • 0 = don’t shrink (shorthand for flex-shrink)
  • 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don’t need the justify-content and align-items here.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. Flex / Grid layouts not working on button or fieldset elements
  3. How do I keep two side-by-side div elements the same height?
  4. How to disable equal height columns in Flexbox?
  5. Proper use of flex properties when nesting flex containers
  6. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  7. Remove space (gaps) between multiple lines of flex items when they wrap
  8. Flexbox: 4 items per row
  9. Equal height columns with CSS
  10. Absolutely positioned flex item is not removed from the normal flow in IE11
  11. Make flex items take content width, not width of parent container
  12. Using flex order property to re-arrange items for desktop and mobile views
  13. Properly sizing and aligning the flex item(s) on the last row
  14. Flexbox fill available space vertically
  15. Flexbox not giving equal width to elements
  16. Why does percentage padding break my flex item?
  17. flex-grow not working in column layout
  18. CSS – How to have children in different parents the same height?
  19. How to center-align one flex item and right-align another using Flexbox [duplicate]
  20. How to make a sticky footer using flexbox in IE11?
  21. Height of flex container not working properly in Safari
  22. Why is there vertical scroll on the main container?
  23. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  24. How can I create a row-based masonry layout using CSS?
  25. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Element with “display: inline-flex” has a strange top margin
  29. Pin a flex item to the bottom of the container
  30. Make flex container take width of content, not width 100%

Leave a Comment