Tournament Bracket with Flexbox

index.html

<h1>Athletic Club of Columbus - Open Tournament</h1>
<main id="tournament">
	<ul class="round round-1">
		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Jim S <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Tom Smith<span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Bill M <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Tom F <span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top ">Frank D <span>1</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom winner">Bob B <span>2</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Kevin S <span>3</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Glen B <span>0</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Tony L <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Victor T <span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Mark R <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Jeremy S <span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Dave C <span>3</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Jesse D <span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Adam P <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Mike V <span>1</span></li>

		<li class="spacer">&nbsp;</li>
	</ul>
	<ul class="round round-2">
		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Jim S <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Bill M <span>1</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Bob B <span>3</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Kevin S <span>0</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top ">Tony L <span>1</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom winner">Mark R <span>2</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top ">Dave C <span>50</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom winner">Adam P <span>66</span></li>

		<li class="spacer">&nbsp;</li>
	</ul>
	<ul class="round round-3">
		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Jim S <span>3</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Bob B <span>0</span></li>

		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top ">Mark R <span>2</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom winner">Adam P <span>1</span></li>

		<li class="spacer">&nbsp;</li>
	</ul>
	<ul class="round round-4">
		<li class="spacer">&nbsp;</li>
		
		<li class="game game-top winner">Jim S <span>3</span></li>
		<li class="game game-spacer">&nbsp;</li>
		<li class="game game-bottom ">Adam P <span>0</span></li>
		
		<li class="spacer">&nbsp;</li>
	</ul>		
</main>

style.css

/*
 *  Flex Layout Specifics
*/
main{
  display:flex;
  flex-direction:row;
}
.round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:200px;
  list-style:none;
  padding:0;
}
  .round .spacer{ flex-grow:1; }
  .round .spacer:first-child,
  .round .spacer:last-child{ flex-grow:.5; }

  .round .game-spacer{
    flex-grow:1;
  }

/*
 *  General Styles
*/
body{
  font-family:sans-serif;
  font-size:small;
  padding:10px;
  line-height:1.4em;
}

li.game{
  padding-left:20px;
}

  li.game.winner{
    font-weight:bold;
  }
  li.game span{
    float:right;
    margin-right:5px;
  }

  li.game-top{ border-bottom:1px solid #aaa; }

  li.game-spacer{ 
    border-right:1px solid #aaa;
    min-height:40px;
  }

  li.game-bottom{ 
    border-top:1px solid #aaa;
  }

tournament-bracket-with-flexbox.markdown

Tournament Bracket with Flexbox

Creating a tournament bracket, complete with the lines, with the Flexbox. That means no tables, no absolute positioning, no images or svg, just plain ole html and css.

A Pen by Adam Preston on CodePen.

License.