Q:

Facing issue with display:flex, should I use float instead

I'm working on a small dream project.  Dream is to enable play chess online.  As part one of this project I want to have a client-side chessboard widget that is firstly accessible for blind.  I'm not good at css at all and need some help.  
I've written javascript to generate 3 things

An unordered list with labels for rows (or ranks as one would call it in chess terms). 
A board which I want adjacent to the list of rank labels. 
An unordered list of column labels (or files as one would call it in chess terms).  I would like have this arranged horizontally underneath the chessboard. 

I have managed to generate markup using javascript and got it to show up on the page.  Additionally, I have keyboard events attached to the board which allow me to navigate the board announcing the rank label and file label for a square. 
Here is what gets rendered on the page:
<div id="main">
    <div class="boardWrapper">
        <div class="upperSection">
            <ul class="rankLabels leftLabelSpace" id="rank">
                <li id="rank_0">8</li>
                <li id="rank_1">7</li>
                <li id="rank_2">6</li>
                ...
                <li id="rank_7">1</li>
            </ul>
            <table role="grid" class="board rightBoardSpace" id="chessBoard">
                <! --8x8 gridcells here-->
            </table>
        </div>
        <div class="lowerSection">
            <div class="leftLabelSpace"><!--empty div--></div>
            <ul id="file" class="fileLabels rightBoardSpace">
                <li id="file_0">a</li>
                <li id="file_1">b</li>
                <li id="file_2">c</li>
                ...
                <li id="file_7">h</li>
            </ul>
        </div>
    </div>
</div>

Here is the css I'm playing around with.  Somehow I can't get the UI rendered as shown in this image of chess board. 
#main {
    width: 100%;
    height: auto;
}
.boardWrapper {
    margin-left: auto;
    margin-right: auto;
    width: 560px;
    height: 560px;
    display: flex;
}
.upperSection {
    flex: 1;
    display: flex;
    width: 100%;
}
.lowerSection {
    clear: left;
    display: flex;
    width: 100%;
    height: 5em;
}
.leftLabelSpace {
    width: 5em;
    height: 100%;
}
.rankLabels {
    list-style-type: none;
}
.rankLabels li {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    height: 12.5%;
}
.fileLabels {
    list-style-type: none;
    flex: 1;
}
.fileLabels li {
    float: left;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    width: 12.5%;
}
.board {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    height: 100%;
    width: 100%;
}

Can someone help me understand how floats and flex work?  I'm bad at css.  If anyone is interested, they can contribute a solution on axchessible github repository. 
Thanks in advance! 

A:

You can create this with only a table.  You don't need to use lists. 
jsfiddle: https://jsfiddle.net/2dkjcoqp/

#main {
  width: 100%;
  height: auto;
}

.boardWrapper {
  margin-left: auto;
  margin-right: auto;
  width: 560px;
  height: 560px;
}

.board {
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  border-spacing: 0px;
  height: 100%;
  width: 100%;
}

table.board tr td {
  border: 1px solid black;
}

table.board tr:nth-of-type(odd) td:nth-of-type(odd),
table.board tr:nth-of-type(even) td:nth-of-type(even) {
  background-color: white;
}
table.board tr:nth-of-type(even) td:nth-of-type(odd),
table.board tr:nth-of-type(odd) td:nth-of-type(even) {
  background-color: black;
}
<div id="main">
  <div class="boardWrapper">
    <table role="grid" class="board" id="chessBoard">
      <tr>
        <th id="rank_0">8</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_1">7</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_2">6</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_3">5</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_4">4</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_5">3</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_6">2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_7">1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <th id="file_0">a</th>
        <th id="file_1">b</th>
        <th id="file_2">c</th>
        <th id="file_3">d</th>
        <th id="file_4">e</th>
        <th id="file_5">f</th>
        <th id="file_6">g</th>
        <th id="file_7">h</th>
      </tr>
    </table>
  </div>
</div>

