Question

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

0 =不要成长（flex-grow的简写）
0 =不缩小（flex-shrink的简写）
230px =从230px开始（flex-basis的简写）

表示：始终为230px。

See fiddle，谢谢@TylerH

哦，你在这里不需要justify-content和align-items。

Answer 2

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

弹性容器的初始设置为flex-shrink: 1。这就是你的专栏缩小的原因。

指定的宽度（it could be width: 10000px）无关紧要，<form> A: <input type="text" name="A" required /> B: <input type="text" name="B" required /> C: <input type="text" name="C" /> <input type="submit" name="save" value="Save">  <input type="submit" name="send" value="Send for submission">  </form>可以忽略指定的宽度，防止弹性项溢出容器。

我正在尝试设置一个包含3列的flexbox，其中左右列的宽度固定...

您需要禁用收缩。以下是一些选项：

flex-shrink

OR

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

OR，根据规范建议：

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

7.2. Components of Flexibility

鼓励作者使用.left, .right { flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */ }简写来控制灵活性   而不是直接用它的速记属性，作为速记   正确地重置任何未指定的组件以容纳common uses。

此处有更多详情：What are the differences between flex-basis and width?

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

试试这个：

flex

这将允许中心列占用可用空间，包括移除它们时其兄弟姐妹的空间。

Revised Fiddle

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>

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

3 个答案: