Html 我怎样才能有两个固定宽度的列，中间有一个灵活的列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23794713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I have two fixed width columns with one flexible column in the center?
提问by mheavers
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.
我正在尝试设置一个包含三列的 flexbox 布局，其中左列和右列具有固定的宽度，而中心列会弯曲以填充可用空间。
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/
这是一个 JSFiddle：http: //jsfiddle.net/zDd2g/185/
回答by Rudie
Instead of using width(which is a suggestion when using flexbox), you could use flex: 0 0 230px;which means:
而不是使用width（这是使用 flexbox 时的建议），您可以使用flex: 0 0 230px;which 表示：
0= don't grow (shorthand forflex-grow)0= don't shrink (shorthand forflex-shrink)230px= start at230px(shorthand forflex-basis)
0= 不增长（简写flex-grow）0= 不要收缩（简写flex-shrink）230px= 开始于230px（ 的简写flex-basis）
which means: always be 230px.
这意味着：永远是230px。
See fiddle, thanks @TylerH
见小提琴，谢谢@TylerH
Oh, and you don't need the justify-contentand align-itemshere.
哦，你不需要这里的justify-content和align-items。
回答by Michael Benjamin
Despite setting up dimensions for the columns, they still seem to shrink as the window shrinks.
尽管为列设置了尺寸，但它们似乎仍然随着窗口的缩小而缩小。
An initial setting of a flex container is flex-shrink: 1. That's why your columns are shrinking.
flex 容器的初始设置是flex-shrink: 1. 这就是您的列正在缩小的原因。
It doesn't matter what width you specify (it could be width: 10000px), with flex-shrinkthe specified width can be ignored and flex items are prevented from overflowing the container.
您指定的宽度（可能是width: 10000px）无关紧要，flex-shrink可以忽略指定的宽度，并且可以防止 flex 项目溢出容器。
I'm trying to set up a flexbox with 3 columns where the left and right columns have a fixed width...
我正在尝试设置一个包含 3 列的 flexbox，其中左列和右列具有固定的宽度...
You will need to disable shrinking. Here are some options:
您将需要禁用收缩。以下是一些选项：
.left, .right {
width: 230px;
flex-shrink: 0;
}
OR
或者
.left, .right {
flex-basis: 230px;
flex-shrink: 0;
}
OR, as recommended by the spec:
或者，按照规范的建议：
.left, .right {
flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */
}
7.2. Components of Flexibility
Authors are encouraged to control flexibility using the
flexshorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
鼓励作者使用
flex速记而不是直接使用其速记属性来控制灵活性，因为速记会正确重置任何未指定的组件以适应常见用途。
More details here: What are the differences between flex-basis and width?
更多细节在这里：flex-basis 和 width 之间有什么区别？
An additional thing I 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.
我需要做的另一件事是根据用户交互隐藏右列，在这种情况下，左列仍将保持其固定宽度，但中心列将填充其余空间。
Try this:
尝试这个：
.center { flex: 1; }
This will allow the center column to consume available space, including the space of its siblings when they are removed.
这将允许中心列消耗可用空间，包括其兄弟列被移除时的空间。
回答by 2xSamurai
Compatibility with older browsers can be a drag, so be adviced.
与旧浏览器的兼容性可能会很麻烦，因此建议您这样做。
If that is not a problem then go ahead. Run the snippet. Go to full page view and resize. Center will resize itself with no changes to the left or right divs.
如果这不是问题，那么继续。运行代码段。转到整页视图并调整大小。Center 将调整自身大小，而不会更改左侧或右侧 div。
Change left and right values to meet your requirement.
更改左右值以满足您的要求。
Thank you.
谢谢你。
Hope this helps.
希望这可以帮助。
#container {
display: flex;
}
.column.left {
width: 100px;
flex: 0 0 100px;
}
.column.right {
width: 100px;
flex: 0 0 100px;
}
.column.center {
flex: 1;
text-align: center;
}
.column.left,
.column.right {
background: orange;
text-align: center;
}<div id="container">
<div class="column left">this is left</div>
<div class="column center">this is center</div>
<div class="column right">this is right</div>
</div>