Flexbox arranges dashboard content into responsive containers, rows, and columns. CSS media queries switch column widths across desktop, tablet, and mobile layouts. section 9.3.1
Build the layout from three structural pieces:
- Container centers content, adds horizontal padding, and limits the page to a maximum width. section 9.3.1
- Rows use display: flex and flex-wrap so their children can form horizontal blocks and wrap. section 9.3.1
- Columns control widths through flex percentages and must be immediate children of rows. section 9.3.1
Responsive visualization dashboard
A dashboard places a rankings visualization beside a nested row containing a scatterplot and bar chart. Classes assign full-width mobile columns, half-width tablet columns, and desktop proportions. section 9.3.1
Listing 9.2 Creating the responsive layout (Charts.js)
<Fragment>
<h1>Front-end Frameworks</h1>
<div className='row'>
<div className='col-12 col-lg-9'> #1
<Rankings ... />
</div>
<div className='col-12 col-lg-3'> #2
<div className='row'>
<div className='col-12 col-md-6 col-lg-12'> #3
<ScatterplotReactControlled ... />
</div>
<div className='col-12 col-md-6 col-lg-12'>
<BarChart ... />
</div>
</div>
</div>
</div>
...
</Fragment>
Inspect the complete React layout showing nested rows and breakpoint-specific column classes around three visualizations. section 9.3.1
