Flex-box

by vovkasolovev

HTML

<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="end">2</div>
  </div>
</div>
<br>
<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="end">2</div>
  </div>
</div>
<br>
<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="end">2</div>
  </div>
</div>
<br>
<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="end">2</div>
  </div>
</div>
<br>
<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div> 
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="end">2</div>
  </div>
</div>
<br>
<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile">1</div> 
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
    <div class="tile">1</div>
  </div>
</div>

CSS

.tile-wrapper {
  display: block;
  position: relative;
  background: gray;
  padding: 5px;
}
.tile-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: justify;
}
.tile {
  display: inline-block;
  min-height: 10px;
  text-align: center;
  background: lightgray;
  min-width: 200px;
  max-width: 200px;
  flex: 1 0 200px;
  box-shadow: 0 0 0 1px white inset;
  margin:5px;
}
.end {  display: inline-block;
  min-height: 10px;
  text-align: center;
  background: yellow;
  flex: 1 0 200px;
    margin:5px;
}