Now, let's think about how to implement the UI of the board page. Comparing to all the pages we've implemented, the biggest difference this page has is that its height needs to be fixed to the same height as the screen. The height of the card list will not exceed the available area of the page, as you can see in Figure 12.4.

One way to archive this is to use JavaScript to calculate the available height of the screen, and then set the height of the card list in JavaScript. This would also require attaching a listener to the browser's resize event so that the height of the card list can be adjusted accordingly. A better way is to use CSS's Flexbox layout to implement it. We will use Flexbox to build the layout of the board page.