重新使用COM箱佈局容器

我想有沿頁面的底部，但在H-箱創建一個頁腳什麼到目前爲止，我已經做了不起作用：重新使用COM箱佈局容器

(defn simple-title [txt] 
    [re-com/title 
    :label txt 
    :level :level1]) 

(defn main-panel [] 
    (fn [] 
    [v-box 
    :height "100%" 
    :children [[h-box 
       :width "100%" 
       :children [(simple-title "Should see right at top of page (works)")] 
       :align-self :start] 
       [h-box 
       :width "100%" 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (not working)") (simple-title "Just to its right")]]]]))

我的理解是，:align-self :end應該做的伎倆。然而，第二個h-box出現在頁面的頂部，直接位於第一個h-box的下方。

來源

2015-10-15 Chris Murphy

如果有方法可以在flexbox上自行演示問題，請發佈。對不起，我對ClojureScript不熟悉。 –

試試這個（未經測試），並務必閱讀文檔：http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/layout

(defn main-panel [] 
    (fn [] 
    [v-box 
    :height "100%" 
    :width "100%"    ;; <-- added 
    :children [[h-box 
       :size "auto"  ;; <-- will expand to fill available space 
       :children [(simple-title "Should see right at top of page (works)")] 
       :align-self :start] 
       [h-box 
       :size "none" ;; <-- natural size (height) 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (not working)") (simple-title "Just to its right")]]]]))

來源

2015-10-16 08:10:02

這使得'：align-self：end' * work *通過將第二個h-box內的內容放在頁面的右側。不幸的是，它仍然處於頂端。所以現在我的問題是：「如何使它解釋：結束爲底部？」 –

那：align-self：end在h-box本身上工作，而不是在兩個孩子身上。所以「：align-self：end」會將hbox本身推送到它的vbox父級橫軸上的「end」（右）。你有沒有經過一個很好的教程，如：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 嘗試刪除「：align-self：end」。你可能會得到你正在尋找的東西。 –

我與你的代碼打，並拿出這樣的：

(defn main-panel [] 
    (fn [] 
    [re-com/v-box 
    :height "100%" 
    :children [[re-com/h-box 
       ;:width "100%" ;; <-- not needed because parent v-box :align defaults to :stretch 
       :children [(simple-title "Should see right at top of page (works)")] 
       ;:align-self :start <-- not needed for same reason as :width "100%" above 
       ] 
       [re-com/box ;; <-- this is the magic that will push the h-box below to the bottom (actually, it's the :size "auto" that does it). 
       :size "auto" 
       :child ""] 
       [re-com/h-box 
       ;:width "100%" ;; <-- not needed for same reason as :width "100%" above 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (now working)") 
          (simple-title "Just to its right")]]]]))

我還添加了一些評論有關你不需要的論點和原因。

最後，我注意到你使用（）爲simple-title組件。請參閱：

https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29

理解使用之間（）和微妙的差別使用[]。

來源

2015-10-16 12:56:26 GreggR

重新使用COM箱佈局容器

回答

相關問題