如何在中心有两个固定宽度的列和一个柔性列？

本文翻译自：How can I have two fixed width columns with one flexible column in the center?

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/

---

#1楼

参考：https://stackoom.com/question/1BQ5H/如何在中心有两个固定宽度的列和一个柔性列

---

#2楼

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; 而不是使用width （这是使用flexbox时的建议），你可以使用flex: 0 0 230px; which means: 意思是：

• 0 = don't grow (shorthand for flex-grow ) 0 =不增长（ flex-grow简写）
• 0 = don't shrink (shorthand for flex-shrink ) 0 =不收缩（ flex-shrink简写）
• 230px = start at 230px (shorthand for flex-basis ) 230px =以230px开始（ flex-basis简写）

which means: always be 230px . 这意味着：总是230px 。

See fiddle , thanks @TylerH 看小提琴 ，谢谢@TylerH

Oh, and you don't need the justify-content and align-items here. 哦，你不需要这里的justify-content和align-items 。

---

#3楼

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 . flex容器的初始设置是flex-shrink: 1 。 That's why your columns are shrinking. 这就是你的专栏缩小的原因。

It doesn't matter what width you specify ( it could be width: 10000px ), with flex-shrink the specified width can be ignored and flex items are prevented from overflowing the container. 无论您指定的宽度（ width: 10000px ）都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. 7.2。 Components of Flexibility 灵活性的组成部分

Authors are encouraged to control flexibility using the flex shorthand 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. 这将允许中心列消耗可用空间，包括删除它们的兄弟姐妹的空间。

Revised Fiddle 修改小提琴

---

#4楼

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. 中心将自行调整大小，不会更改左或右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>