Flexbox tile layout with matching margins and alignment

Question

How can we achieve the following layout:

Under the following conditions:

• The tiles of each row should be equal in height to the highest element in the row

• The last fragment of the line should be flush with the parent container (no spaces)

• Tiles can be different width factors (3 times one third or third + two thirds, etc.)

• Fragment order unknown

• No mesh frame

• Only modern browsers

And the following markup:

<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile two-thirds">2/3</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
  </div>
</div>

Answer 1

This is an increasingly common layout that can be relatively easily achieved with flexbox and some smart container layout.

. , 30px, , margin-right: 30px , nth-of-type margin-right .

, . , nth-of-type, , . /p >

, . , div ( 90%) overflow: hidden, 100% ; width: calc(100% + 30px). , , , .

, , flex- , , ; .third { flex: 0 0 calc(33.33% - 30px); /* for a 1/3 tile */}

:

* {
  box-sizing: border-box;
}
.tile-wrapper {
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
.tile-container {
  display: flex;
  position: relative;
  width: calc(100% + 30px);
  flex-wrap: wrap;
}
.tile {
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 30px;
  min-height: 200px;
  line-height: 199px;
  text-align: center;
  border: 1px solid black;
}
.two-thirds {
  flex: 0 0 calc(66.66% - 30px);
}
.third {
  flex: 0 0 calc(33.33% - 30px);
}
.sixth {
  flex: 0 0 calc(16.66% - 30px);
}

.. (Chrome, Safari, FF, IE11 +). IE11, flex-basis, calc().

Answer 2

:

• flex-basis: 0 flex-grow .
• , .
• flex.
• -.

.tile-wrapper {
  border: 1px solid #000;
}
.tile-container {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
  margin: -5px; /* Neutralize margins at the edges */
}
.tile {
  min-height: 50px; /* Just an example */
  margin: 5px;
  border: 1px solid #979797;
  background: #d8d8d8;
}
.sixth{ flex: 1; } /* 1/6 * 6 */
.third{ flex: 2; } /* 1/3 * 6 */
.two-thirds{ flex: 4; } /* 2/3 * 6 */
.tile-container::before, .tile-container::after {
  content: ''; /* Enable the pseudo-element */
  order: 1; /* Place it at the appropiate place */
  width: 100%; /* Force line break */
}
.tile-container > :nth-child(n+4) { order: 1; }
.tile-container > :nth-child(n+6) { order: 2; }

<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile two-thirds">2/3</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
  </div>
</div>