即使在包装后也具有等宽的 flex 项目 [英] Equal width flex items even after they wrap

问题描述

是否可以像这样制作纯 CSS 解决方案:

1. 项目有一些min-width.
2. 它们应该动态增长以填充所有容器宽度，然后换行到新行
3. 列表中的所有项目都应该具有相同的宽度.

这是现在的样子:

这就是我想要的样子(我手动管理了那些底部项目的宽度只是为了显示预期的结果):

.container {显示:弹性；flex-wrap: 包裹;}.物品 {背景:黄色；最小宽度:100px；高度:20px；文本对齐:居中；边框:1px纯红色；弹性增长:1；}

<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div>

这是一个

Is it possible to make a pure CSS solution like this:

1. Items have some min-width.
2. They should grow dynamically to fill all container width and then wrap to new lines
3. All items on the list should have equal width.

This is how it looks now:

And this is how I would like it too look like (I've managed those bottom items' width manually just to show the expected result):

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Here is a fiddle demo.

解决方案

Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It's beyond the scope of the current spec.

Here's more information and various solutions people have used to get around the problem:

• Targeting flex items on the last row
• Is it possible for flex items to align tightly to the items above them?

However, last-row alignment is not a problem with another CSS3 technology, Grid Layout. In fact, it's very simple with this method (and requires no changes to the HTML):

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

jsFiddle demo

The grid-template-columns property sets the width of explicitly defined columns. The rule above is telling the grid container to create as many columns as possible (auto-fit), and each column's width will be a minimum of 100px and maximum of 1fr, which consumes remaining space (similar to flex-grow: 1). When there's no more space on the row, a new row is created.

The grid-auto-rows property sets the height of automatically created rows. In this grid each row is 20px tall.

The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. It doesn't apply to the area between items and the container.

Note that the settings above are all at the container-level. Unlike with flex items, we can remove the responsibilities for height, width and margin (to an extent) from grid items.

---

Browser Support for CSS Grid

• Chrome - full support as of March 8, 2017 (version 57)
• Firefox - full support as of March 6, 2017 (version 52)
• Safari - full support as of March 26, 2017 (version 10.1)
• Edge - full support as of October 16, 2017 (version 16)
• IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

---

Cool grid overlay feature in Firefox: In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

这篇关于即使在包装后也具有等宽的 flex 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！