我怎么能有两个固定宽度的列，中间有一个灵活的列?

我试图设置一个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>

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

273775 次浏览
小开
最佳答案

而不是使用width(这是使用flexbox时的一个建议)，你可以使用flex: 0 0 230px;，这意味着:

  • 0 =不增长(flex-grow的简写)
  • 0 =不收缩(flex-shrink的简写)
  • 230px =从230px开始(flex-basis的简写)

这意味着:始终是230px。

看到小提琴，谢谢@TylerH

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

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;
}
小开

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

flex容器的初始设置是< >强flex-shrink: 1 < / >强。这就是为什么你的列变小了。

不管你指定什么宽度(它可以是width: 10000px)，使用flex-shrink，指定的宽度可以被忽略，并且伸缩项被防止溢出容器。

我试图设置一个flexbox 3列，其中左列和右列有一个固定的宽度…

您需要禁用收缩功能。以下是一些选择:

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

或

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

或，如规范所推荐的:

.left, .right {
flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2。的组件 < /灵活性强> < / > < / p > 鼓励作者使用flex简写来控制灵活性 而不是直接用它的速记属性 正确重置任何未指定的组件，以适应通用 使用< / > . < / p >

更多细节:弹性基和宽度有什么区别?

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

试试这个:

.center { flex: 1; }

这将允许中心列消耗可用空间，包括删除其兄弟列时的空间。

修订的小提琴

小开

与旧浏览器的兼容性可能是一个拖累，所以建议使用。

如果这不是问题，那就继续吧。 运行代码片段。转到全页视图并调整大小。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>

小开 
.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;
}

提交答案