Flag flex

flag-flex.markdown

Flag flex

A Pen by Razafindrakoto on CodePen.

License.

index.html

<div class="flag">
  <div id="box-container-mg">
    <div id="box-1-mg"></div>
    <div id="box-2-mg"></div>
    <div id="box-3-mg"></div>
  </div>

  <div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
  </div>
</div>

style.css

.flag {
  display: flex;
  margin-top: 50px;
}

#box-container {
  background: white;
  display: flex;
  height: 400px;
  justify-content: space-between;
  border: solid 2px black;
  width: 48%;
}
#box-1 {
  background-color: #003399;
  width: 32%;
  height: 100%;
}

#box-2 {
  background-color: #ee0A30;
  width: 32%;
  height: 100%;
}

#box-container-mg {
  margin: 0 20px 0 0;
  display: flex;
  height: 400px;
  flex-flow: column;
  flex-wrap: wrap;
  border: solid 2px black;
  width: 48%;
}
#box-1-mg {
  background-color: white;
  width: 40%;
  height: 100%;
}
#box-2-mg {
  background-color: red;
  width: 60%;
  height: 50%;
}
#box-3-mg {
  background-color: green;
  width: 60%;
  height: 50%;
}

@media (max-width: 750px) {
  .flag {
    margin-top: 100px;
  }
  #box-container, #box-container-mg {
    height: 200px;
  }
}