All examples By author By category About

boeric
Full window Github gist

CSS Box Model and Flexbox Using D3

CSS Box Model and Flexbox Demo

The Gist demos the following:

  1. The effects of margin, border, padding and inner content dimensions of the overall size of DOM elements (here, span elements)
  2. That outline has no effect on the element size and layout
  3. The horizontal or vertical layout of elements
  4. The optional use of Flexbox in laying out elements
  5. The use of various justify-content settings when using Flexbox
  6. The effect of setting dimensions on the item container div
  7. How to create a DOM structure including input and select elements with event handlers using D3
  8. How to calculate the full dimension of an element
  9. How to extract current inline styles of elements

The Gist is live here: https://bl.ocks.org/boeric