html - playground - flexbox兼容




我怎么能有两个固定宽度的柱子,中间有一个柔性柱子? (2)

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

flex容器的初始设置是flex-shrink: 1 。 这就是为什么你的专栏正在缩小。

指定的宽度无关紧要( 它可以是width: 10000px ),使用flex-shrink可以忽略指定的宽度,并且可以防止flex项溢出容器。

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

您将需要禁用收缩。 以下是一些选项:

.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。 灵活性的组成部分

鼓励作者使用flex速记而不是直接使用它的速记属性来控制灵活性,因为速记正确地重置了任何未指定的组件以适应常见用途

更多细节在这里: flex-basis和width之间有什么区别?

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

尝试这个:

.center { flex: 1; }

这将允许中心列消耗可用空间,包括其兄弟姐妹在被移除时的空间。

修订小提琴

我试图设置一个带有三列的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/ : http://jsfiddle.net/zDd2g/185/


而不是使用width (这是使用flexbox时的建议),您可以使用flex: 0 0 230px; 意思是:

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

这意味着:始终是230px

看到小提琴 ,谢谢@TylerH

哦,你不需要这里的justify-contentalign-items





flexbox