Search code examples
htmlcssflexbox

How can I repeat first elements on wrap in a flex layout?

I have a number of sequences. Each sequence have a name and an array of characters. I have to order the characters vertical aligned:

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA

If the character arrays becomes longer (or the visible space is small), line breaks occurs and i want the following display:

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA
sequence1 GGATTAGCTAGCTAGACTACGGATCGA
sequence2 GGAGGATCGGCTTCGATCGATTCTTAG
sequence3 GGCATTTAGGGGGATTATATTTCTCTA

The length of sequences can be very high. It is neccessary to repeat the sequence names. How can i achieve that?

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.stack {
    display: flex;
    flex-direction: column;
    font-family: courier;
    font-weight: bold;
    font-size: 24px;
}
<div class="container">
    <div class="stack">
        <div>Sequenz1</div>
        <div>Sequenz2</div>
        <div>Sequenz3</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>h</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>a</div>
    </div>
</div>

If I resize the window. Flex wraps like expected. But I need the names again.

Solution

  • To get a fully scalable system I think you'd need JS [see below], but here is a CSS/HTML only method which repeats the labels using text-shadows, having separated them out from the text strings using grid.

    And I guess if this is DNA where you may have millions of characters it's not going to be very practical.

    Given here more as a fun demo for anyone who has a less huge problem.

    .container {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
}

.seqences {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.labels {
  text-shadow: 0 3lh 0px black, 0 6lh 0px black, 0 9lh 0px black, 0 12lh 0px black, 0 15lh 0px black, 0 18lh 0px black, 0 21lh 0px black, 0 24lh 0px black, 0 27lh 0px black, 0 30lh 0px black, 0 33lh 0px black, 0 36lh 0px black, 0 39lh 0px black, 0 42lh 0px black, 0 45lh 0px black, 0 48lh 0px black, 0 51lh 0px black, 0 54lh 0px black, 0 57lh 0px black;
}

.stack {
  display: flex;
  flex-direction: column;
  font-family: courier;
  font-weight: bold;
  font-size: 24px;
}
    <div class="container">
  <div class="stack labels">
    <div>Sequenz1</div>
    <div>Sequenz2</div>
    <div>Sequenz3</div>
  </div>
  <div class="seqences">
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>h</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <div>a</div>
    </div>
  </div>
</div>

    Here is the version with simple JS needed to create the text-shadow depending on the number of sequences (which it can find out for itself) and the maximum number of repetitions you will need (which you have to tell it). The version here has set that to 400 just for a test, but I don't have a real set of sequences to test it with.

    // set n to the maximum number of block repetitions you are ever going to need (if the system can cope!)
const n = 400;
const labels = document.querySelector('.labels');
const s = labels.children.length;
let t = '';
for (i = 0; i < n; i++) {
  t += '0 ' + i * s + 'lh 0 black,';
}
t = t.slice(0, -1);
labels.style.setProperty('--t', t);
    .container {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
}

.seqences {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.labels {
  text-shadow: var(--t);
}

.stack {
  display: flex;
  flex-direction: column;
  font-family: courier;
  font-weight: bold;
  font-size: 24px;
}

div {
  margin: 0;
}
    <div class="container">
  <div class="stack labels">
    <div>Sequenz1</div>
    <div>Sequenz2</div>
    <div>Sequenz3</div>
  </div>
  <div class="seqences">
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>h</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <div>a</div>
    </div>
  </div>
</div>