Flexbox，最小CSS

Question

我想使用Flexbox实现卡片容器。我有一些已经开发的解决方案，但我想确保我使用最现代和简约的配置。下面有一个小提琴。缺少的，对我来说很重要的是，如果DIV是行中唯一的那个（那么移动......），那么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配置，还是应该使用媒体查询？

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