我怎样才能有两个固定宽度的列，中间有一个灵活的列? [英] How can I have two fixed width columns with one flexible column in the center?

问题描述

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

尽管为列设置了尺寸，但它们似乎仍会随着窗口的缩小而缩小.

有谁知道如何做到这一点?

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

#container {显示:弹性；justify-content:空间环绕；对齐项目:拉伸；最大宽度:1200px；}.column.left {宽度:230px；}.column.right {宽度:230px；左边框:1px 实心#eee；}.column.center {左边框:1px 实心#eee；}

<div class="左列"><p>Anxiety 是一个博客系列，于 2012 年 1 月至 2013 年 7 月在《纽约时报》的意见版块中运行.它以散文、小说和艺术为特色，由广泛的贡献者从科学、文学和艺术的角度探索焦虑.</p>
<div class="列中心"><img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">

<div class="右列">巴林特·萨科<br/>有人敲我的门<br/>01.12.13

这是一个 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.

img {最大宽度:100%；}#容器 {显示:弹性；x-justify-content: 空间环绕；x-align-items:拉伸；最大宽度:1200px；}.column.left {宽度:230px；弹性:0 0 230px；}.column.right {宽度:230px；弹性:0 0 230px；左边框:1px 实心#eee；}.column.center {左边框:1px 实心#eee；}

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.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

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