flex spacer自动生长

时间：2017-12-08 11:24:21

标签： html css css3 flexbox

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

flashscore示例是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>

主要困难在于我不知道会有多少参与者

我该怎么做？

1 个答案:

答案 0 :(得分：1)

  

但我不能在第二行之间留下空白

你可以在flex: 1上使用.round__game，然后他们会伸展并填充他们的父母，然后，justify-content: center就会得到这个

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

  

主要的困难在于我不知道会有多少参与者   在那里

我将第一行加倍，所以你可以看到这项工作，而不知道有多少参与者。

Updated codepen

Stack snippet 

.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

Stack snippet 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>

相关问题
最新问题