小编典典

如何在中心有两个固定宽度的列和一个柔性列?

html

我正在尝试建立一个具有三列的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>

阅读 225

收藏
2020-05-10

共1个答案

小编典典

除了使用width(这是使用flexbox时的建议)之外,您还可以使用以下flex: 0 0 230px;方法:

  • 0=不要成长(的简称flex-grow
  • 0=不要缩水(的简写flex-shrink
  • 230px=从230px(的简写形式flex-basis)开始

这意味着:永远是230px

哦,您不需要justify-contentalign-items

2020-05-10