CSS Flex 网格 - 最后一项的宽度相同

Posted 2023-03-06

【中文标题】CSS Flex 网格 - 最后一项的宽度相同

【英文标题】：CSS Flex grid - Same width for last item

【发布时间】：2013-11-06 16:31:28

【问题描述】：

嘿，我正在尝试为画廊创建一个响应式框布局，看起来像这样 http://webdesignerwall.com/demo/responsive-column-grid/

这个例子的问题是宽度是硬编码的，而且媒体查询是必要的。我有很多专栏可以作为一个可行的解决方案。

我可以使用 Flex 网格实现相同的结果，但是最后一列比其他列大，如本 CodePen 所示：

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height">
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>why am I longer than my friends?</div>
  </div>
</div>

CSS

.flex-container 
    display: -webkit-flex;
    display: flex;
    width: 100%;
    max-width: 950px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: grey;

  & > * 
    min-width: 300px;
    background: green;
    max-width: 404px;
    flex: 1 1 auto;
  
  .flex-item > div 
    background: red;
  

问题： 如何使最后一列的大小与其他列相同？

【问题讨论】：

大家好，我刚刚找到了这个link，它很好地解决了这个问题。不幸的是，兼容性不是太好。 IE10 不工作。最新的chrome和opera都很好。

您所需要的只是一个预处理器 mixin，以及使用该 mixin 的一行代码。见这里：***.com/a/36401995/635069

【参考方案1】：

将弹性增长设置为 0。

小提琴：http://jsfiddle.net/RichAyotte/Ev5V7/

<div class='flex-container seven'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

.flex-container 
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

.flex-container div 
    font-size: 200%;
    padding: 2mm;
    margin: 10px 10px;
    flex: 0 1 20%;
    box-shadow: 3px 3px 2px 0px rgba(50, 50, 50, 0.5);

【讨论】：

我的第一反应是印象深刻。明天会玩它，然后回复你。干杯。

【参考方案2】：

这是一个常见的误解，但 Flexbox 不是网格系统。一旦弹性项目设置为灵活，它们的大小只能相对于同一行上的其他弹性项目，而不是任何其他行上的弹性项目。如果不使用特定宽度（尽管此宽度可以是百分比），则无法强制它们对齐。

你的最小宽度在这里没有用，因为你的弹性项目是灵活的。您的 flex-shrink 值没有任何作用，因为您的 flex 项目是允许换行的。最大宽度是唯一阻止最后一行的项目填满整行的东西。您必须知道前一行中项目的确切宽度才能设置正确的最大宽度值。

相关：

Flex-box: Align last row to grid Left aligned last row in centered grid of elements

【讨论】：

是的，你是对的。 Flexbox 在这一点上并没有真正设计成这样做。我真的希望你能做到这一点，因为它非常接近于完美解决我在原始问题中所说的问题。谢谢你的帮助。很想支持你的答案，但是我还没有足够的声誉:)

【参考方案3】：

使用弹性盒子时，您必须注意 max- 和 min- 的宽度。引用w3schools:

提示：灵活的元素可以随着盒子的收缩和增长而收缩或增长。只要盒子中有多余的空间，就会展开灵活的元素来填充该空间。

为解决此问题，请为您的容器设置 X 个像素的宽度，但使用百分比而不是内部框的像素数量。所有列的容器百分比都相同。

这样做也消除了对弹性盒子的需求，因为只有当您希望在水平方向（根据每个盒子的内容使它们更宽）而不是垂直方向扩展盒子时。

PS - 如果您希望这种响应式响应并保持宽度与中间的空间成比例，请使用百分比作为边距（但请记住边框和填充大小）。这不是必需的，但对于在不同设备上保持一致的外观和感觉很有用。

【讨论】：

感谢您抽出宝贵时间来回答。不幸的是我不太明白你的意思。按照你的指示，我只能得到：codepen，这并不能真正解决我的问题

这是我在那个 codepen 中看到的：i.imgur.com/Wvzosh1.jpg - 这是最新的 Google Chrome 和 Firefox 最新的显示相同。那个说“为什么我更长……”的那个和其他的大小一样。您能否发送您所看到内容的屏幕截图，或者如果这不是您想要的，我很抱歉，如果您能提供它，我很乐意重新审视这个更详细的信息。

是的，我看到的和你完全一样，先生。还使用最新的 Chrome。我想我正在寻找的是像那个 codepen 中的网格，但是响应容器将填满以使用剩余空间的方式。看到 Firefox 甚至还不支持 flex-warp 属性，这绝对是错误的做法。我想我可能不得不坚持使用媒体查询来完成这项任务。感谢您的帮助。

请不要引用 w3school.... 他们的文档中有很多错误，他们的名字暗示他们隶属于 W3C（开源/标准），但他们是利润，他们经常脱离日期，并且存在许多优质资源......

【参考方案4】：

CSS

.box 
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px, 1fr));

html

<div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
</div>