15

嘿，我正在尝试为画廊创建一个响应式框布局，看起来像这样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;
  }
}

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

4

4 回答 4

28

将弹性增长设置为 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);
}
于 2014-03-24T11:55:25.247 回答
11

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

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

有关的：

于 2013-10-28T03:45:30.123 回答
4

使用弹性盒子你必须小心你的max-和min-宽度。引用w3schools：

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

为了解决这个问题，请为您的容器启动 X 个像素的宽度，但使用百分比而不是内部框的像素量。对于所有列，容器的百分比将相同。

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

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

于 2013-10-28T01:09:18.557 回答
3

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>
于 2020-07-21T19:16:56.000 回答