iT邦幫忙

0

不同大小的div向上排列問題_使用自訂flexbox(非RWD & Bootstrap)

  • 分享至 

  • xImage

大家好!
最近在使用自訂flexbox做排版的時候,在排列不同大小div的情況下,想要讓所有div都向上貼齊
請問除了把小的blocks用一個大的block包起來排列之外,有沒有其他更好的方法?或是flexbox本身是否有其他可以達成此目標的屬性可供設定?
code超連結
詳細效果請參考圖一、二

![圖一:目標樣式](https://i.imgur.com/CohcbBU.png)

![圖二:測試結果](https://i.imgur.com/tEV9YQL.png)
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
最佳解答
看更多先前的回應...收起先前的回應...

align-content:flex-start有使用,
但以測試結果來說會遇到像圖二的狀況。

要這樣嵌套吧
https://ithelp.ithome.com.tw/upload/images/20180830/20108694w3J2tDATHe.png

現在為了達到效果已經是用這樣的方式切割了。(不過我是把block 12346789包起來)
只是想弄清楚如果你的圖中左右兩個block是合在一起並設定align-content:flex-start的話,為什麼6 7 8 9上方明明是空的卻沒有辦法貼齊上排block的下緣。

因為flex-direction: row;屬性的關係,會依此行的最高高度,也就是5的高型為一行row的邊界,6789則從第一行的邊界開始,如果改用flex-direction: column;會變成用列的方式排列,每列高度依此行的最高高度為一列column的邊界,如下圖:https://ithelp.ithome.com.tw/upload/images/20180830/20108694i1Qf9UzvBi.png

所以無論是用flex-direction: column或row,重點是該行或列的最高高度的判斷依據。了解,感謝你的回覆!!!/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答