Question

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

示例的问题在于宽度是硬编码的，并且媒体查询是必需的。我有很多专栏可以解决这个问题。

我可以使用Flex girds获得相同的结果，但是最后一列比其他列大，如此CodePen所示：

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;
  }
}

问题： 如何让最后一列与其他列的尺寸相同？

Answer 1

将flex增长设为0。

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

enter image description here

<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);
}

Answer 2

这是一种常见的误解，但Flexbox不是网格系统。将弹性项设置为灵活后，它们只能相对于同一行上的其他弹性项目进行大小调整，而不能使用任何其他行上的弹性项目进行调整。没有使用特定宽度就无法强制它们排队（尽管这个宽度可以是百分比）。

由于您的柔性物品非常灵活，因此您的最小宽度无用。您的flex-shrink值没有用处，因为您的flex项目可以包装。最大宽度是阻止最后一行上的项填充整行的唯一因素。您必须知道前一行中项目的确切宽度才能设置正确的最大宽度值。

相关：

Answer 3

使用弹性框，您必须小心max-和min-宽度。引自w3schools：

提示：随着盒子缩小和增长，柔性元素会缩小或增长。只要盒子中有额外的空间，就会扩展柔性元素以填充该空间。

要抵消这种情况，请为容器启动X个像素的宽度，但使用百分比而不是内部框的像素数量。所有列的容器百分比都相同。

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

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

Answer 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>

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

4 个答案: