@enact/ui/Layout/Layout.module.css

A collection of simplified unstyled cross-platform UI components for Enact

.layout {
  display: flex;
  margin: 0;
  box-sizing: border-box;
}
.layout .cell {
  flex: 1 0;
  position: relative;
}
.layout .cell.grow {
  flex: 1 1 100%;
}
.layout .cell.shrink {
  flex: 0 0 auto;
}
.layout.horizontal {
  flex-direction: row;
}
.layout.horizontal > .cell {
  max-width: var(--cell-size);
}
.layout.horizontal > .cell.grow {
  width: 0;
}
.layout.horizontal > .cell.grow.size {
  max-width: none;
  min-width: var(--cell-size);
}
.layout.vertical {
  flex-direction: column;
  height: 100%;
}
.layout.vertical > .cell {
  max-height: var(--cell-size);
}
.layout.vertical > .cell.grow {
  height: 0;
  align-self: normal;
}
.layout.vertical > .cell.grow.size {
  max-height: none;
  min-height: var(--cell-size);
}
.layout.inline {
  display: inline-flex;
}
.layout.wrap {
  flex-wrap: wrap;
}
.layout.nowrap {
  flex-wrap: nowrap;
}
.layout.wrapReverse {
  flex-wrap: wrap-reverse;
}
:global(.debug.layout).layout,
:global(.debug.layout) .layout {
  outline: 1px dotted teal;
}
:global(.debug.layout).layout .cell,
:global(.debug.layout) .layout .cell {
  outline: 1px dashed red;
}
:global(.debug.layout) .layout .cell {
  outline-color: red;
}
:global(.debug.layout) .layout .layout .cell {
  outline-color: orange;
}
:global(.debug.layout) .layout .layout .layout .cell {
  outline-color: yellow;
}
:global(.debug.layout) .layout .layout .layout .layout .cell {
  outline-color: lime;
}
:global(.debug.layout) .layout .layout .layout .layout .layout .cell {
  outline-color: cyan;
}
:global(.debug.layout) .layout .layout .layout .layout .layout .layout .cell {
  outline-color: blue;
}
:global(.debug.layout) .layout .layout .layout .layout .layout .layout .layout .cell {
  outline-color: violet;
}
:global(.debug.layout) .layout .layout .layout .layout .layout .layout .layout .layout .cell {
  outline-color: lightslategray;
}