flex complicated layout

by ian_smithz

HTML

<div class="wrap">
  <h2 class="title">
    Complex layout with flex box
  </h2>
  <button class="btn-show">Toggle Border</button>
  <div class="container card">
    <div class="flex row structure">
      <div class="flex row structure-1">
        <div class="flex element a">
          <div class="content">
            A
          </div>
        </div>
        <div class="flex element b">
          <div class="content">
            B
          </div>
        </div>
        <div class="flex col structure-1-2-1">
          <div class="flex element c">
            <div class="content">
              C
            </div>
          </div>
          <div class="flex element d">
            <div class="content">
              D
            </div>
          </div>
        </div>
        <div class="flex element e">
          <div class="content">
            E
          </div>
        </div>
      </div>
      <div class="flex row structure-2">
        <div class="flex element f">
          <div class="content">
            F
          </div>
        </div>
        <div class="flex col structure-2-2">
          <div class="flex element g">
            <div class="content">
              G
            </div>
          </div>
          <div class="flex element h">
            <div class="content">
              H
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

$gutter: 20px;

.container,
.element {
    padding: $gutter / 2;
}

.flex {
	display: flex;
	box-sizing: border-box;
}

.row {
	flex-flow: row wrap;
}

.col {
	flex-flow: column wrap;
}

.element {
	min-width: 100px;
}

.content {
	flex: 1 100%;
}

.content {
  color: #fff;
  background-color: #cccccc;
  padding: 20px;
  font-family: 'Montserrat';
  font-size: calc(1vw + 1em);
}

.container.show-border,
.element.show-border {
  border: 1px red solid;
  padding: 9px;
}

.structure {
	min-height: 480px;
}

.structure-1 {
	flex: 1 percentage(5/9);
}

.a {
	flex: 1 percentage(2/5);
}

.b {
	flex: 1 percentage(3/5);
}

.structure-1-2-1 {
	flex: 1 percentage(1/5);
}

.c,
.d {
	flex: 1 percentage(1/2);
}

.e {
	flex: 1 percentage(4/5);
}

.structure-2 {
	flex: 1 percentage(4/9);
}

.f {
	flex: 1 percentage(2/4);
}

.structure-2-2 {
	flex: 1 percentage(2/4);
}

.g {
	flex: 1 percentage(3/4);
}

.h {
	flex: 1 percentage(1/4);
}

@media (max-width: 768px) {
	.structure-1,
	.structure-2,
	.f,
	.structure-2-2{
		flex: 1 100%;
		min-height: 480px;
	}
}

JavaScript

(function(){
	$('.btn-show').on('click', function(){
		$('.container').toggleClass('show-border');
		$('.element').toggleClass('show-border');
	});
})();