A tool for planning out flex layouts
Hover over the elements above to add or remove children to the selected element. Click to make an element active. The properties below are for the currently active element.
Container
Properties which manage the parent level styles
Item
Properties which manage the item level styles
Source
<html>

  <head>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      body>div {
        flex: 1;
      }

      div {
        min-height: 64px;
        min-width: 64px;
        padding: 16px;
      }

      .class0 {
        display: flex;
        background-color: white;
      }
    </style>
  </head>

  <body>
    <div class="class0">

    </div>
  </body>

</html>