Flexbox – 两个固定宽度的柱子，一个灵活

我试图设置一个flexbox有三列，其中左列和右列有一个固定的宽度，中间列弯曲以填充可用空间。

尽pipe为立柱设置了尺寸，但随着窗口缩小，它们似乎仍然缩小。

任何人都知道如何做到这一点？

我需要做的另一件事就是根据用户交互来隐藏右列，在这种情况下，左列仍然保持固定的宽度，但中间的列将填充剩余的空间。

#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> 

这是一个小提琴： http : //jsfiddle.net/zDd2g/185/

Answer 1

而不是使用width （这是使用flexbox时的build议），您可以使用flex: 0 0 230px; 意思是：

• 0 =不增长（ flex-grow简写）
• 0 =不缩水（缩写缩写）
• 230px =从230px开始（基于flex-basis简写）

这意味着：始终是230px 。

瞧瞧小提琴

哦，我删除了justify-content和align-items因为它们是不相关的。

Answer 2

尽pipe为立柱设置了尺寸，但随着窗口缩小，它们似乎仍然缩小。

flex容器的初始设置是flex-shrink: 1 。 这就是为什么你的专栏正在缩小。

指定的宽度无关紧要（ 可以是width: 10000px ），使用flex-shrink可以忽略指定的宽度，并且可以防止flex项溢出容器。

我试图设置一个flexbox有3列左右列有一个固定的宽度…

您将需要禁用收缩。 这里有一些选项：

 .left, .right { width: 230px; flex-shrink: 0; } 

要么

 .left, .right { flex-basis: 230px; flex-shrink: 0; } 

或者，根据规范推荐：

 .left, .right { flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */ } 

7.2。 灵活性的组成部分

鼓励作者直接使用flex速记而不是直接使用它的速记属性来控制灵活性，因为速记正确地重置了任何未指定的组件以适应常见的用途 。

更多细节在这里： flex-basis和width有什么区别？

我需要做的另一件事就是根据用户交互来隐藏右列，在这种情况下，左列仍然保持固定的宽度，但中间的列将填充剩余空间。

尝试这个：

 .center { flex: 1; } 

这将允许中心列消耗可用空间，包括它的兄弟姐妹在被移除时的空间。

修改小提琴