Flexbox Form Layout

by amindunited

HTML

<form>
  <div class="flex_container">
  
    <div class="container_block">
      1
    </div>

    <div class="container_block">
      2
    </div>

    <div class="container_block">
      3
    </div>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}
.flex_container {
   display: flex;
   flex-wrap: wrap;
   border:solid 2px white;
}
.container_block {
  border: solid 1px pink;
  flex-grow: 1;
  flex-basis: 25%;
  flex-flow: row wrap;
}
.container_block:nth-child(1) { border-color: red; flex-grow: 2; flex-basis: 50%; }
.container_block:nth-child(2) { border-color: blue;}
.container_block:nth-child(3) { border-color: green;}

@media (max-width: 600px) { 
  .container_block {
    border: solid 1px pink;
    flex-grow: 1;
    flex-basis: 50%;
    flex-flow: row wrap;
    background-color: pink;
  }
  .container_block:nth-child(1) { border-color: red; flex-grow: 2; flex-basis: 100%; }
}