Question 377491 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    write your sequence name in :before class using some data attribute
    then you can repeat the name in each flex just to try

    Login or Signup to reply.
  2. 0

    To get a fully scalable system I think you’d need JS, 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search