html - flex 垫片自动增长

Question

我正在尝试使用 flexbox 制作锦标赛括号。

速记分数示例是 here

但我不能在第二行之间留出空隙。 my codepen

.brackets {
  display: flex;
  flex-direction: row;
}

.round {
  display: flex;
  flex-direction: column;
  margin-right: 31px;
  justify-content: center;
}
.round__item-wrapper {
  width: 200px;
  height: 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #ea1312;
}
.round__item-spacer {
  min-height: 15px;
  flex-grow: 1;
}
.round__game {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
}
.round__game-spacer {
  flex-grow: 1;
}
.round__game-spacer:first-child, .round__game-spacer:last-child {
  flex-grow: 0.5;
}

<div class="brackets mt-3">
    <div class="round">
        <div class="round__game-spacer">&nbsp;</div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-spacer"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game-spacer">&nbsp;</div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-spacer"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game-spacer">&nbsp;</div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-spacer"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game-spacer">&nbsp;</div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-spacer"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game-spacer">&nbsp;</div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game-spacer">&nbsp;</div>
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-spacer"></div>
                <div class="round__item-wrapper"></div>
            </div>
            <div class="round__game-spacer">&nbsp;</div>
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-spacer"></div>
                <div class="round__item-wrapper"></div>
            </div>
            <div class="round__game-spacer">&nbsp;</div>
          </div>
    </div>
</div>

主要难点是不知道会有多少人参加

我该怎么做？

Answer 1

But I can't make gaps between second row

您可以在 .round__game 上使用 flex: 1，它们将拉伸(stretch)并填充它们的父级，然后使用 justify-content: center你明白了

注意 1:我删除了所有“空格”元素，因为它们不是必需的。如果您在某处需要间隙/排水沟，请改用边距。

The main difficulity is that I don't know how many participants will be there

我将第一行加倍，因此您可以在不知道有多少参与者的情况下看到这项工作。

Updated codepen

堆栈片段

.brackets {
  display: flex;
}

.round {
  display: flex;
  flex-direction: column;
  margin-right: 15px;
}
.round__item-wrapper {
  width: 120px;
  height: 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #ea1312;
}
.round__game {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.round:first-child .round__game {
  margin: 5px 0;
}

<div class="brackets mt-3">
    <div class="round">
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
</div>

---

通过 justify-content: space-around 你可以得到这个

Updated codepen 2

堆栈片段 2

.brackets {
  display: flex;
}

.round {
  display: flex;
  flex-direction: column;
  margin-right: 15px;
}
.round__item-wrapper {
  width: 120px;
  height: 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #ea1312;
}
.round__game {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.round:first-child .round__game {
  margin: 5px 0;
}

<div class="brackets mt-3">
    <div class="round">
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
        <div class="round__game">
            <div class="round__item-wrapper"></div>
            <div class="round__item-wrapper"></div>
        </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
    <div class="round">
        <div class="round__game">
            <div class="round__game">
                <div class="round__item-wrapper"></div>
            </div>
          </div>
    </div>
</div>