D3 Examples - CSS Box Model and Flexbox Using D3

CSS Box Model and Flexbox Demo

The Gist demos the following:

The effects of margin, border, padding and inner content dimensions of the overall size of DOM elements (here, span elements)

That outline has no effect on the element size and layout

The horizontal or vertical layout of elements

The optional use of Flexbox in laying out elements

The use of various justify-content settings when using Flexbox

The effect of setting dimensions on the item container div

How to create a DOM structure including input and select elements with event handlers using D3

How to calculate the full dimension of an element

How to extract current inline styles of elements

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

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Box Model and Flexbox Demo</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
  <script src="index.js" defer></script>
</head>
<body>
  <div class="outerContainer">
    <div class="subTitleContainer">Controls</div>
    <div class="controlsContainer"></div>
    <div class="subTitleContainer">Container</div>
    <div class="contentContainer"></div>
  </div>
  <div class="overlay"></div>
</body>
​
    