我怎么能有两个固定宽度的柱子，中间有一个柔性柱子？ [英] How can I have two fixed width columns with one flexible column in the center?

问题描述

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

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

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

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

  #container {display：flex; justify-content：space-around; align-items：stretch;最大宽度：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 =left left> < p>焦虑症是2012年1月至2013年7月在纽约时报观点部分发表的一系列博客系列文章。它以广泛的贡献者为主题，介绍散文，小说和艺术，从科学，文学和艺术角度探索焦虑< / p为H. < / 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>  

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

解决方案不使用 width （这是使用flexbox时的建议），您可以使用 flex：0 0 230px; 表示：

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


• 0 =不缩水（缩写 flex-shrink ）


• 230px =开始于 230px （简写为 flex-basis ）



这意味着：总是 230px 。

看小提琴，谢谢@TylerH

哦，并且您不需要这里的 justify-content 和 align-items 。

I'm trying to set up a flexbox layout 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 JSFiddle: 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.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

这篇关于我怎么能有两个固定宽度的柱子，中间有一个柔性柱子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！