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>

來源

2016-09-22 Benneb10

所以你想讓每一個標題開始一個寬度由列中最寬的內容設置的列？ –

看來你需要不同的柔性箱相互影響。唯一的方法是獲取標題元素大小並通過javascript將其應用於其他人（不要這樣做！）。柔性盒不是網格系統甚至表格。如果你想要表格，只需使用由css和html提供的表格。

來源

2016-09-22 18:59:08

Flexbox標題匹配其他行內容

回答

相關問題