To create a bar chart, we need to set up an array of div elements all aligned to their bottom and then control their height properties. Then, we need to find a clever way to display each bar's label and, optionally, each bar's value.
To create the
div array, we could simply use a
div container with
position:relative containing a div element for each bar absolutely positioned with bottom:0. The problem with this technique is that we have to define the size of each bar in the CSS. We would also need to know in advance the number of bars of the chart we're styling, making our CSS less adaptable with different charts or dynamic modification of the chart that we're styling.
To solve this problem, we need to find a CSS structure that can equally subdivide the container's space between the children elements. We've already used the flexible box layout display mode in past chapters, however, we've typically used it for centering elements both horizontally and vertically. To...