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

Question

我正在尝试设置一个包含三列的flexbox布局,其中左列和右列具有固定宽度,中心列弯曲以填充可用空间.

尽管为列设置了尺寸,但随着窗口缩小,它们似乎仍在缩小.

有谁知道怎么做到这一点？

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

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

这是一个JSFiddle:http://jsfiddle.net/zDd2g/185/

Answer 1

而不是使用width(这是使用flexbox时的建议),您可以使用以下flex: 0 0 230px;方式:

• 0=不成长(简写flex-grow)
• 0=不收缩(简写flex-shrink)
• 230px=从230px(简写flex-basis)开始

这意味着:永远230px.

看小提琴,谢谢@TylerH

哦,你不需要justify-content和align-items这里.

Answer 2

尽管为列设置了尺寸,但随着窗口缩小,它们似乎仍在缩小.

Flex容器的初始设置是flex-shrink: 1.这就是你的专栏缩小的原因.

无论您指定的宽度(可能是width: 10000px)都无关紧要,flex-shrink可以忽略指定的宽度,并防止Flex项溢出容器.

我正在尝试设置一个带有3列的flexbox,其中左右列具有固定宽度...

您需要禁用收缩.以下是一些选项:

.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; }

这将允许中心列消耗可用空间,包括删除它们的兄弟姐妹的空间.

修改小提琴

Answer 3

与旧浏览器的兼容性可能会很麻烦，因此建议您这样做。

如果这不是问题，那么继续。运行代码段。转到整页视图并调整大小。Center 将调整自身大小，而不会更改左侧或右侧 div。

更改左右值以满足您的要求。

谢谢你。

希望这可以帮助。

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