flex 固定一列,Flexbox - 两个固定宽度的列，一个灵活

I'm trying to set up a flexbox 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;

}

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.

Balint Zsako

Someone’s Knocking at My Door

01.12.13

解决方案

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.

Oh, and I removed the justify-content and align-items because they're irrelevant.