Flexbox test

by András Parditka

HTML

<div class="ui wrapper">
  <div class="ui col">
    <div class="ui area leaf never-grow never-shrink">
      A
    </div>
    <div class="ui row never-shrink">
      <div class="ui row never-shrink">
        <div class="ui area leaf never-shrink">
          B
        </div>
      </div>
      <div class="ui area leaf never-shrink">
        B
      </div>
      <div class="ui col never-grow">
        <div class="ui area leaf zero">
          C
        </div>
        <div class="ui area leaf zero">
          C
        </div>
      </div>
    </div>
    <div class="ui area leaf never-grow never-shrink">
      A
    </div>
  </div>
</div>

CSS

*
{
  box-sizing: border-box;
}
html
{
  height: 100%;
}
body
{
  margin: 0;
  height: 100%;
  display: flex;
}
.ui
{
  display: flex;
  flex-grow: 1;
}
.match-container
{
  flex-basis: 100%;
}
.zero
{
  flex-basis: 0;
}
.never-grow
{
  flex-grow: 0;
}
.never-shrink
{
  flex-shrink: 0;
}
.wrapper
{
  border: 1px solid red;
  padding: .5px;
}
.col
{
  flex-direction: column;
}
.row
{
}
.area
{
  margin: .5px;
  background: black;
  color: white;
}
.leaf
{
  justify-content: center;
  align-items: center;
}