Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation by Peter Cook

Author:Peter Cook [Peter Cook]
Language: eng
Format: epub, pdf
Publisher: leanpub.com
Published: 2022-06-23T00:00:00+00:00

And the CSS is:

body { margin: 0; font-family: sans-serif; } #header { height: 4rem; background-color: #222; color: white; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } #menu { display: flex; } #menu div { padding-left: 1rem; }

The outermost <div> element represents the header. It has two children: a title and a menu. The header element acts as a flex container (display is set to flex on #header). The title and menu are arranged at opposing ends of the header by setting justify-content to space-between. The items are vertically centered within the container by setting align-items to center.

In order to arrange the menu items in a row, the menu element (#menu) is also made a flex container (its display property is set to flex). Thus the menu is both a flex container and a flex item.

The finished header looks like:

Website header arranged using nested flex containers

Hopefully this gives you a flavour of what Flexbox can achieve. If you’d like to learn more about Flexbox one of the best tutorials is https://css-tricks.com/snippets/css/a-guide-to-flexbox. I’ve also built a Flexbox explorer (https://app.peterrcook.com/flexplorer/) which lets you quickly explore each property interactively.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.