How can I have two fixed width columns with one flexible column in the center?
css, flexbox, html
Solution
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;
}
Problem
I'm trying to set up a flexbox layout with three columns where the left and right columns have a fixed width, and the center column flexes to fill the available space. Despite setting up dimensions for the columns, they still seem to shrink as the window shrinks. Anyone know how to accomplish this? An additional thing I will need to do is hide the right column based on user interaction, in which case the left column would still keep its fixed width, but the center column would fill the rest of the space. ``` #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } ``` ``` <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p> </div> <div class="column center"> <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt=""> </div> <div class="column right"> Balint Zsako <br/> Someone’s Knocking at My Door <br/> 01.12.13 </div> </div> ``` Here's a JSFiddle: http://jsfiddle.net/zDd2g/185/