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

Question

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

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

我可以使用Flex girds获得相同的结果,但是最后一列比其他列大,如本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;
  }
}

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

Answer 1

将flex增长设置为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);
}

Answer 2

这是一种常见的误解,但Flexbox不是网格系统.将弹性项设置为灵活后,它们只能相对于同一行上的其他弹性项目进行大小调整,而不能使用任何其他行上的弹性项目进行调整.如果不使用特定宽度,则无法强制它们排列(尽管此宽度可以是百分比).

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

有关:

• 弹性框:将最后一行与网格对齐
• 在元素的居中网格中左对齐的最后一行

Answer 3

使用你有一个柔性盒要小心你max-和min-宽度.引自w3schools:

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

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

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

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