Flexbox Header Match Other Rows Content

Я только начинаю вычислять Flex-коробку, есть ли способ получить строку заголовка в гибкой коробке, чтобы она соответствовала автоматической ширине, заданной рядом X-многих строк? Мне нужно, чтобы весь элемент в строке был сгруппирован, поэтому я не могу использовать столбцы.Flexbox Header Match Other Rows Content

Возможно колонка с рядами внутри?

Ищете что-то похожее на элемент таблицы-столбца, но для flexbox.

https://jsfiddle.net/benneb10/yjdabpzm/

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 10px; 
 
    text-transform: uppercase; 
 
    font-family: helvetica; 
 
    text-align: left; 
 
} 
 
.flexRowHeader { 
 
    font-weight: bold; 
 
} 
 
.flexBox { 
 
    background: lightblue; 
 
    width: 100%; 
 
} 
 
.flexBox .flexRow:nth-child(2n) { 
 
    background: #fff; 
 
} 
 
.flexRow { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    height: 50px; 
 
    align-items: center; 
 
} 
 
.multiLineFlexGroup { 
 
    width: 50%; 
 
    align-self: flex-start; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    transition: all 2s ease; 
 
} 
 
.multiLineFlexGroup .flexRow { 
 
    align-items: center; 
 
} 
 
.flexItem { 
 
    flex: auto; 
 
    max-width: 200px; 
 
} 
 
button.icon { 
 
    height: 16px; 
 
    width: 16px; 
 
    background-size: contain; 
 
}

<div class="flexBox"> 
 
    <div class="flexRow flexRowHeader"> 
 
    <span class="flexItem">Heading A</span> 
 
    <span class="flexItem">Heading B</span> 
 
    <span class="flexItem">Heading C</span> 
 
    <span class="flexItem">Heading D</span> 
 
    <span class="flexItem">Heading E</span> 
 
    <span class="flexItem">Heading F</span> 
 
    <span class="flexItem">Heading G</span> 
 
    <span class="flexItem">Heading H</span> 
 
    </div> 
 
    <div class="flexRow"> 
 
    <div class="flexItem">Test</div> 
 
    <span class="flexItem">SMALL ITEM</span> 
 
    <span class="flexItem">ANOTHER ITEM</span> 
 
    <span class="flexItem">VERY VERY VERY LARGE ITEM</span> 
 
    <div class="multiLineFlexGroup"> 
 
     <div class="flexRow"> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     <span class="flexItem">ITEM</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-09-22 Benneb10

Итак, вы хотите, чтобы каждый заголовок начинал колонку с шириной, заданной самым широким контентом в столбце? –

Кажется, что вы хотите различные гибкие ящики, чтобы взаимодействовать друг с другом. Единственный способ - получить размеры элементов заголовка и применить его к другим с помощью javascript (не делайте этого!). Flex-box - это не сетка или даже таблицы. Если вам нужны таблицы, просто используйте таблицы, предоставленные css и html.

источник

2016-09-22 18:59:08

Flexbox Header Match Other Rows Content

ответ

Смежные вопросы