一个弹性项目在另一个开始收缩之前可能会完全收缩

由 yautem发布于 2020-05-09 05:41:22

我要解决的问题是保持宽度灵活的项居中。但是，由于居中项一侧的一些附加元素，我不得不创建2个装订线。

布局如下：

-------------------------------------------------------------------
| gutter |           flexible content             | fixed content |
-------------------------------------------------------------------

.container {
  display: flex;
  width: 100%
}

.left-gutter {
  flex: 0 1 100px;
  background: blue;
}

.content {
  flex: 1 1 auto;
  background: green;
}

.right-gutter {
  flex: 0 0 100px;
  background: blue;
}

<div class="container">
  <div class="left-gutter"></div>
  <div class="content">Some amount of flexible content that shouldn't shrink til it has to</div>
  <div class="right-gutter">Fixed</div>
</div>

左右装订线的宽度相同，但是右边装订线永远不会缩小。

当屏幕较大时，它将使灵活内容居中，但随着屏幕缩小。我希望在柔性内容变窄之前，左侧装订线缩小到零。

我认为唯一可行的方法是在左装订线上设置一个非常高的flex-shrink值，但是我不认为这可以确保弹性内容不会收缩。

CSS网格是否有更好的方法来解决此问题？

初吻给了烟

2020-05-09 05:41:22

One of the possible workaround to achieve such a thing is to set a media query and change the value of flex-grow and flex-basis whenever the window reaches a certain breakpoint. So, in this case, I will set a media query for 767px (certain breakpoint for small devices) and make the flex-basis: auto; to let the browser decide what is the base width for that certain point and make the flex-grow: 1; to let the browser know I don't want to make that desired div jump from 100% to 0 at the certain breakpoint.

因此，您的代码应该是这样的（尝试在整页上进行检查并手动更改窗口大小以查看结果）：

.container {
  display: flex;
  width: 100%
}

.left-gutter {
  flex: 0 1 100px;
  background: blue;
}

.content {
  flex: 1 1 auto;
  background: green;
}

.right-gutter {
  flex: 0 0 100px;
  background: blue;
}

@media only screen and (max-width: 767px) {
  .left-gutter {
    flex-grow: 1;
    flex-basis: auto;
  }
}

<div class="container">
  <div class="left-gutter"></div>
  <div class="content">Some amount of flexible content that shouldn't shrink til it has to</div>
  <div class="right-gutter">Fixed</div>
</div>

一起来看雷阵雨

2020-05-09 05:41:22

使用CSS Grid相对简单：

.container {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content) 100px;
}

.left-gutter {
  background: blue;
}

.content {
  background: green;
}

.right-gutter {
  background: blue;
}

<div class="container">
  <div class="left-gutter"></div>
  <div class="content">Some amount of flexible content that shouldn't shrink til it has to</div>
  <div class="right-gutter">Fixed</div>
</div>

yautem

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3129
注册排名
1687