FlexBox Gallery CSS

laying out FlexBox CSS for responsive mediaPlayer

by ndw5015

HTML

<!-- gallery view -->
<div class="parent">
  <div class="child-left">
    <div class="button">
    </div>
    <div class="button">
    </div>
    <div class="button">
    </div>
    <div class="button">
    </div>
    <div class="button">
    </div>
  </div>
  <div class="child-right">
    gallery view right
  </div>
</div>

CSS

.parent {
  display: flex;
  flex-basis: calc(33.333% - 6px);
}

.parent > .child-right {
  flex: 2;
  border:1px solid green;
}

.parent > .child-left {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  border:1px solid red;
}

.parent > .child-left > .button {
  position: relative;
  flex-basis: calc(33.333% - 6px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 10%;
}

.parent > .child-left > .button::before {
  content: '';
  display: block;
  padding-top:5%;
}