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 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCAsequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGAsequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGAIf the character arrays becomes longer (or the visible space is small), line breaks occurs and i want the following display:
sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCAsequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGAsequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGAsequence1 GGATTAGCTAGCTAGACTACGGATCGAsequence2 GGAGGATCGGCTTCGATCGATTCTTAGsequence3 GGCATTTAGGGGGATTATATTTCTCTAThe 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> </div><div>a</div><div>t</div></div><div class="stack"><div> </div><div>c</div><div>a</div></div><div class="stack"><div> </div><div>g</div><div>a</div></div><div class="stack"><div> </div><div> </div><div>a</div></div></div>If I resize the window. Flex wraps like expected. But I need the names again.