Flex layout

by Karmalakas

HTML

<h2>R</h2>
<div class="layout">
  <div class="column">
    <div class="row area">
      <button><span class="label">Button 9</span></button>
      <button>
        <span slot="icon" class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <rect width="18" height="18" style="fill:transparent;stroke: currentColor;stroke-width: 2;" />
            <path d="M12,0 L18,0 L18,18 L6,18Z" />
          </svg>
        </span>
        <span class="label">Button 9</span>
      </button>
    </div>
  </div>
</div>

<h2>C</h2>
<div class="layout">
  <div class="column">
    <div class="column area">
      <button>
        <span slot="icon" class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <rect width="18" height="18" style="fill:transparent;stroke: currentColor;stroke-width: 2;" />
            <path d="M12,0 L18,0 L18,18 L6,18Z" />
          </svg>
        </span>
        <span class="label">Button 1</span>
      </button>
      <button><span class="label">Button 1</span></button>
    </div>
    <div class="column area">
      <button><span class="label">Button 2</span></button>
    </div>
  </div>
</div>

<h2>M</h2>
<div class="layout">
  <div class="column">
    <div class="row">
      <div class="column area">
        <button>
          <span slot="icon" class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
              <rect width="18" height="18" style="fill:transparent;stroke: currentColor;stroke-width: 2;" />
              <path d="M12,0 L18,0 L18,18 L6,18Z" />
            </svg>
          </span>
          <span class="label">Button 1</span>
        </button>
        <button><span class="label">Button 1</span></button>
      </div>
      <div class="column area">
        <button><span class="label">Button 2</span></button>
      </div>
    </div>
  </div>
</div>

SCSS

.layout {
  margin: -0.25em;
}

.area {
  border: 2px solid red;
  padding: 0.25em;
  margin: 0.25em;
}

.column,
.row {
  display: flex;
  flex: auto;
}

.column {
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink: 1;
}

.row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

button {
  display: flex;
  flex-direction: row;
  justify-content: start;
  flex-basis: 0;
  min-width: 2.25em;
  white-space: nowrap;
  margin: 0.25em;

  .icon {
    height: 1em;
    width: 1em;
    align-self: center;

    svg {
      fill: currentColor;
      height: 1em;
      width: 1em;
    }
  }

  .label {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1em;
    font-weight: inherit;
    margin-left: 0.25em;
  }

}

.row>button {
  align-self: flex-start;
  flex: 1;
}