重新使用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箱布局容器

回答

相关问题