Unsure whether to use Flexbox, tables, or rows and columns

Question

So I am trying to make a controller for an RC car that will work on any size screen, I plan on having the page of the app have up, down, left, right, and in the middle a stop, so sort of like a tv remote control look. I am newer to html and css and am just unsure what would be the best way to go about doing this. I want the buttons to autofit to the screen and fill it. Any advice would be great.

Answer 1

Flexbox support isn't great (http://caniuse.com/#search=flexbox). Tables are supported in all browsers, however, it really isn't the right solution; tables are designed for charts, not layout.

The best solution is to use responsive design techniques (min-width, max-width, % widths, etc) with divs. This should be compatible in IE9+ and all modern browsers. See http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/, http://www.sitepoint.com/common-techniques-in-responsive-web-design/, or simply Google "Responsive Design" for more information.

Answer 2

I would use none of the above. I would use absolute positioning like this:

.up, .down, .left, .right, .stop { 
    position: absolute;
    width: 33.3%;
    height: 33.3%;
}

.up {
    top: 0%;
    left: 33.3%
}

.right {
    top: 33.3%;
    left: 66.6%;
}

And so on.

This has the benefit of being compatible with every browser ever created by humans.