xul -> flexbox model

layout.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
 * layout.css
 *
 * Layout related rules.
 *
 */

/* Sensible defaults */

* {
  -moz-appearance: none;
  background-color: transparent;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  font-family: sans-serif;
  font-size: 12px;
  image-rendering: -moz-crisp-edges;
}

*::-moz-focus-inner {
  border: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

box, hbox, vbox, spacer {
  display: flex;
  white-space: pre;
}

hbox {
  flex-flow: row;
}

vbox {
  flex-flow: column;
}

[hidden="true"] {
  display: none;
}

[flex="1"] {         flex-grow: 1 }
[flex="2"] {         flex-grow: 2 }
[flex="3"] {         flex-grow: 3 }
[flex="4"] {         flex-grow: 4 }
[flex="5"] {         flex-grow: 5 }
[flex="6"] {         flex-grow: 6 }
[flex="7"] {         flex-grow: 7 }
[flex="8"] {         flex-grow: 8 }
[flex="9"] {         flex-grow: 9 }

[align="start"] {    align-items: flex-start }
[align="center"] {   align-items: center }
[align="end"] {      align-items: flex-end }
[align="baseline"] { align-items: baseline }
[align="stretch"] {  align-items: stretch }

[pack="start"] {     justify-content: flex-start }
[pack="center"] {    justify-content: center }
[pack="end"] {       justify-content: flex-end }

/* DEBUG */
.debug * {
  margin: 2px;
  padding: 2px;
  outline: 1px dashed black;
  position: relative;
}
.debug hbox {
  background: red;
}
.debug vbox {
  background: blue;
}
.debug spacer,
.debug box{
  background: yellow;
}
.debug hbox:before,
.debug vbox:before,
.debug box:before {
  position: absolute;
  font-size: 10px;
  top: 0; left: 0;
  display: block;
  content: attr(class);
}