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

html CSS

猪猪

2020-03-23

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

第2890篇《如何在中心有两个固定宽度的列和一个柔性列？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
十三阳光泡芙 2020.03.23

除了使用width（这是使用flexbox时的建议）之外，您还可以使用以下flex: 0 0 230px;方法：

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

这意味着：永远是230px。

见小提琴，谢谢@TylerH

哦，您不需要justify-content和align-items。

Mandy 2020.03.23

与旧版浏览器的兼容性可能会很麻烦，因此建议您。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android