每行FlexBox元素

我用flexbox將一組元素整齊地排成一行。現在我需要爲這些元素提供清晰的標題，以便定義它們向最終用戶顯示的內容。我嘗試過使用另一個柔性盒，但無論我如何設計它，它似乎都與它下面的柔性盒有不同的比例。每行FlexBox元素

我讀了約row wrap能夠在多行上對元素進行分組，但是這是動態執行的。此外，在這裏也提出了一個關於這個問題的問題，答案是否定的。但是，這是在2012年 - 有事情變了嗎？

或者，有沒有更好的方法來解決這個問題？也許包含一組垂直柔性盒的水平柔性盒？

的目標是，使它們看起來像下面的圖片對齊的元素：

Image

我已經建立了一個快速和骯髒的示範這裏：https://jsfiddle.net/qLveL7ae/

來源

2017-04-12 Scary Spice

想起一件大事這裏是保持您的標題與它下面的框相同的寬度。這個佈局怎麼樣:(抱歉不能處理你的類名和內聯樣式）。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
.top { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    outline: 1px solid red; 
 
} 
 

 
.top a { 
 
    width: 15.5%; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 20px; 
 
    color: black; 
 
} 
 

 
.bottom { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding: 10px 0; 
 
    outline: 1px solid red; 
 
} 
 

 
.box { 
 
    width: 15.5%; 
 
} 
 

 
.box-short { 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.box-full { 
 
    height: 300px; 
 
    border: 5px solid black; 
 
}

<div class="wrapper"> 
 
    <section class="top"> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    <a href="#">title</a> 
 
    </section> 
 
    <section class="bottom"> 
 
    <div class="box box-short"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-full"></div> 
 
    <div class="box box-short"></div> 
 
    </section> 
 
</div>

來源

2017-04-12 18:16:09 StefanBob

不壞。唯一的問題是第二個和倒數第二個標題有些偏斜，而且只會在頁面調整大小時增加。這只是我將不得不忍受的事情嗎？ –

再次檢查，如果這仍然發生，我立即更新它 – StefanBob

採取那個Coker – StefanBob

也許含有一組垂直flexboxes的水平Flexbox的？

這就是我會這麼做的。像這樣的東西。

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    height: 300px; 
 
} 
 
h1 { 
 
    padding: 0 .5em; 
 
} 
 
.col:first-child, .col:last-child { 
 
    height: 200px; 
 
} 
 
.col > div { 
 
    border: 1px solid red; 
 
    flex-grow: 1; 
 
}

<div class="flex"> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    <div class="flex col"> 
 
    <h1>title</h1> 
 
    <div>content</div> 
 
    </div> 
 
    
 
</div>

來源

2017-04-12 18:18:51

每行FlexBox元素

回答

相關問題