CSS Flex: повторение первых элементов при переносе ⇐ CSS

[Anonymous]

У меня есть несколько последовательностей. Каждая последовательность имеет имя и массив символов. Мне нужно выровнять символы по вертикали:

Код: Выделить всё

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA

Если массивы символов становятся длиннее (или видимое пространство мало), возникают разрывы строк, и я хочу следующее отображение:

Код: Выделить всё

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

Длина последовательностей может быть очень большой. Необходимо повторить имена последовательностей.
Как этого добиться?

Код: Выделить всё

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.stack {
display: flex;
flex-direction: column;
font-family: courier;
font-weight: bold;
font-size:  2 4 p x ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; d i v   c l a s s = " c o n t a i n e r " & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; S e q u e n z 1 & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; S e q u e n z 2 & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; S e q u e n z 3 & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; h & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; t & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; g & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t ; a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " s t a c k " & g t ; < b r   / >                 & l t ; d i v & g t ; c & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v & g t;t
t


g
c
c


a
t
t


g
a
t


c
t
a


t
t
g


g
c
c


t
g
t


a
a
a


c
t
g


g
c
c


t
t
t


a
a
a


g
g
g


t
c
c


c
t
t


g
t
a


a
a
g


g
g
t


c
c
t


t
t
c


a
a
g


c
g
a


t
c
t


a
t
t


 
a
t


 
c
a


 
g
a


 
 
a

Если я изменю размер окна. Flex обертывается, как и ожидалось. Но мне снова нужны имена.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ts-on-wrap