Flexbox，最少的 CSS答案

【问题标题】：Flexbox, with minimum CSSFlexbox，最少的 CSS
【发布时间】：2018-03-14 17:34:13
【问题描述】：

我想使用 Flexbox 实现一个卡片容器。我有一些已经开发的解决方案，但我想确保我使用的是最现代和最简约的配置。我在小提琴下面有这个。缺少的，对我来说很重要的是，当 DIV 是行中唯一的一个时，它的宽度为 100%（如此移动..）：

.flex-container {
  display: flex;
	flex-flow: row wrap;
	justify-content: center;
  width: 100%;
}
.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);
  max-width: 100%;
  min-width: 80px;
  background-color: #26f;
}

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

是否可以使用 Flex 配置或者我应该使用媒体查询？

【问题讨论】：

为什么这个标签是 Bootstrap？你用的是这个吗？
当然这应该通过媒体查询来处理，看不出来这甚至是个问题......
Flexbox 和媒体查询都不能检测最后一行是否有单个元素，为此您需要脚本。不过，您可以做的是在您知道有一个断点的地方定义断点，并为此使用媒体查询。

标签： css twitter-bootstrap flexbox

【解决方案1】：

只需在子 DIV 中使用 flex-grow...

.flex-container div {
  flex: 1 0 auto;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}
.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);
  max-width: 100%;
  min-width: 80px;
  background-color: #26f;
  flex: 1 0 auto;
}

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

【讨论】：