Flexbox的所有元素設定基線

考慮這個HTMLFlexbox的所有元素設定基線

<div class="container"> 
    <div class="element"> 
    <div class="top"> 
     <div>A</div> 
     <div>B</div> 
    </div> 
    <hr/> 
    <div class="bottom"> 
     <div>C</div> 
    </div> 
    </div> 
    <div class="element"> 
    <div class="top"> 
     <div>A</div> 
    </div> 
    <hr/> 
    <div class="bottom"> 
     <div>B</div> 
     <div>C</div> 
    </div> 
    </div> 
    <div class="element"> 
    <div class="top"> 
     <div>A</div> 
    </div> 
    <hr/> 
    <div class="bottom"> 
     <div>B</div> 
    </div> 
    </div> 
</div>

我想行中的元素了水平使用flexbox，這使得水平線對齊。看來align-items: baseline會做正確的事情 - 如果我可以確保元素div在水平條上有基線。

請參閱this codepen link的東西玩弄。

如何控制這種塊元素的基線？

來源

2015-09-21 Joachim Breitner

我認爲不可能控制哪個元素是基線。我想你必須在3行中分隔這一點：在行內容/行/在行內容之下。 – Sebastien

'.element'中已經存在這種分離。或者你是否說我必須首先列出所有的「頂」，然後是所有的「人」，然後是所有的「底」塊？這對於多線柔性盒佈局來說很難。 –

是的，只是寫了一個演示，讓我發佈。 – Sebastien

您可以使用多個堆疊的柔性盒來實現此目的，但HTML會變得更復雜，但它看起來像是假裝您自己設置基準線的唯一方法。

演示：https://jsfiddle.net/Paf_Sebastien/tLk1jajo/

過線的含量是在一個實現Flexbox與：

.overline { 
    align-items: flex-end; 
}

線下的內容在另一與：

.underline { 
    align-items: flex-start; 
}

來源

2015-09-21 08:55:54 Sebastien

我想仔細看看，但從我的大學網絡來看，jsfiddle.net似乎經常超時。我稍後再看看！ –

試試這個：http://codepen.io/anon/pen/dYXWpY – Sebastien

感謝您的codepen鏈接。不幸的是，這並沒有完全削減它：如果你使用'flex-wrap：wrap;'（我需要在我的用例中）並且它必須包裝行，那麼事情就會變得非常糟糕。 –

我想要使用flexbox水平排列元素，例如水平線規則對齊。看來，對齊項：基準將做正確的事

align-items: baseline是不會幫助你在這裏，因爲要針對不同的元素對齊到其他元素（的hr，而不是對準同元素基於文本基線）。

如果你可以用.element S的固定高度的工作，那麼在不改變你的標記，你可以做一個嵌套flex和平衡你的.top和.bottom，像這樣：

.top, .bottom { 
    height: 49%; 
    display: flex; flex-direction: column; 
    align-items: center; 
} 
.top > div, .bottom > div { flex: 0 0 auto; }

，然後對準在.top一個底部（即接近hr），你會做一個margin-top: auto，像這樣：

.top > div { margin-top: auto; }

這將也和你的flex-wrap: wrap一起玩。嘗試在下面的示例中更改小提琴窗格的寬度或窗口大小。

完整的例子片段：

* { box-sizing: border-box; padding: 0; margin: 0; } 
 
.container { 
 
    height: 320px; border: 1px solid #ddd; 
 
    display: flex; flex-wrap: wrap; 
 
    align-items: center; 
 
} 
 
.element { 
 
    flex: 1 1 auto; 
 
    height: 120px; width: 200px; 
 
    padding: 0.5em; 
 
} 
 
.top, .bottom { 
 
    height: 49%; 
 
    display: flex; flex-direction: column; 
 
    align-items: center; 
 
} 
 
.top > div, .bottom > div { flex: 0 0 auto; } 
 
.top > div { margin-top: auto; }

<div class="container"> 
 
    <div class="element"> 
 
    <div class="top"> 
 
     <div>A</div> 
 
     <div>B</div> 
 
    </div> 
 
    <hr/> 
 
    <div class="bottom"> 
 
     <div>C</div> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="top"> 
 
     <div>A</div> 
 
    </div> 
 
    <hr/> 
 
    <div class="bottom"> 
 
     <div>B</div> 
 
     <div>C</div> 
 
    </div> 
 
    </div> 
 
    <div class="element"> 
 
    <div class="top"> 
 
     <div>A</div> 
 
    </div> 
 
    <hr/> 
 
    <div class="bottom"> 
 
     <div>B</div> 
 
    </div> 
 
    </div> 
 
</div>

小提琴：http://jsfiddle.net/abhitalks/vym76nyn/

Codepen：http://codepen.io/anon/pen/ZbOyzE

。

來源

2015-09-21 10:23:05 Abhitalks

Flexbox的所有元素設定基線

回答

相關問題