Flexbox标题匹配其他行内容

问题描述：

我刚刚开始弄清楚Flex框，有没有什么办法让flex框中的标题行与下一个X-many行设置的自动宽度匹配？我需要将该行中的所有元素分组在一起，因此我无法使用列。Flexbox标题匹配其他行内容

也许一列里面有行？

寻找类似于表列元素但类似于flexbox的东西。

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>

所以你想让每一个标题开始一个宽度由列中最宽的内容设置的列？ –

答

看来你需要不同的柔性箱相互影响。唯一的方法是获取标题元素大小并通过javascript将其应用于其他人（不要这样做！）。柔性盒不是网格系统甚至表格。如果你想要表格，只需使用由css和html提供的表格。

Flexbox标题匹配其他行内容

相关推荐