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

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>

Answer 1

除了使用width（这是使用flexbox时的建议）之外，您还可以使用以下flex: 0 0 230px;方法：

• 0=不要成长（的简称flex-grow）
• 0=不要缩水（的简写flex-shrink）
• 230px=从230px（的简写形式flex-basis）开始

这意味着：永远是230px。

哦，您不需要justify-content和align-items。