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的所有元素设定基线

回答

相关问题