Flexbox - 两个固定宽度的列，一个灵活 [英] Flexbox - two fixed width columns, one flexible

问题描述

我尝试设置一个包含三列的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>焦虑是2012年1月至2013年7月在纽约时报意见部分刊登的一篇博客系列文章。其中包括从科学，文学和艺术角度探讨焦虑的广泛贡献者的文章，小说和艺术。< / p> < / div> < div class =column center> < img src =http://i.imgur.com/60PVLis.pngwidth =100height =100alt => < / div> < div class =column right> Balint Zsako< br />有人在我的门敲响< br /> 01.12.13< / div>< / div>  

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

width （这是使用flexbox时的建议），你可以使用 flex：0 0 230px; 这表示：

• 0 =不生长（ flex-grow 的缩写）


• 0 =不收缩（ flex-shrink 的缩写）


• 230px = start 230px （ flex-basis 的简写）

这意味着：总是 230px 。

Voila fiddle。

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

I'm trying to set up a flexbox with three columns where the left and right columns have a fixed width, and the center column flexes to fill the available space.

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 fiddle: http://jsfiddle.net/zDd2g/185/

解决方案

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

• 0 = don't grow (shorthand for flex-grow)
• 0 = don't shrink (shorthand for flex-shrink)
• 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

Voila fiddle.

Oh, and I removed the justify-content and align-items because they're irrelevant.

这篇关于Flexbox - 两个固定宽度的列，一个灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！