Because we don't want to develop a CSS bar chart implementation that only works for this specific HTML code, we have to distinguish between properties related to this chart from ones that are more generic and re-usable. For this reason, the main element has a class called
this_bar_chart. We can use this class specifically for this chart, for example, to define width and height for this chart, thus we can write the following in application.scss:
.this_bar_chart{
width: 600px;
height: 400px;
}Good! We now need to implement the flexible box layout to subdivide the spaces of elements with the
data-bar-chart attribute equally between all the data-bar elements.
A minor complication is that there are currently two distinct flexbox syntaxes (as we saw in Chapter 9, Creating an Intro), and browser support for both syntaxes is incomplete. To work around this complication, we will implement both. We need to set the container's display property to either box (old syntax...