4

我在使用 flexbox 时遇到了一些困难。如您所见，我有一个aside包含社交媒体图标有序列表的元素。出于某种原因，我无法让这些图标粘在包含div.

代码 

 <div class="outercontainer group"> 
      <div class="dividing-row span_1_of_2 col"> 
        <p> here is some text </p>      
            <aside>
              <ol class="category-name">
                <li><i class="fa fa-pinterest-p"></i></a></li>
                <li><i class="fa fa-flickr"></i></a></li>
              </ol>
            </aside>      
        </div>
     </div>

CSS 代码

.outercontainer // this keeps all containers the same height in fluid design
{
display: flex;  
flex-wrap: wrap;
}


ol.category-name
{
display: inline-block;
color: #FFF; 
align-self: flex-end!important;  // this does not work 
}

任何人都可以帮忙吗？我错过了显而易见的事情吗？

非常感谢，p

4

1 回答 1

2

这里有几点需要考虑：

  1. 当你创建一个弹性容器时，只有子元素成为弹性项目。子元素之外的任何后代元素都不是弹性项目，弹性属性不适用于它们。

  2. 如果您想将 flex 属性应用到 f​​lex items 的子项，您还需要使 flex item 成为一个 flex 容器。换句话说，您需要创建嵌套的弹性容器。

  3. 您没有为您的容器指定任何高度。所以每个容器的高度都是基于内容的高度。如果内容是单行，你真的没有太多的高度。

所以在你的 HTML 结构中，flex 容器是......

<div class="outercontainer group">

唯一的弹性项目是......

<div class="dividing-row span_1_of_2 col">

、<p>和<aside>是<ol>常规<li>块元素。Flex 属性不适用。

如果你想使用 flex 属性来对齐容器底部的社交媒体图标，你需要让父容器成为一个 flex 容器并给它一个高度。

这是一个包含更多细节的演示：http: //jsfiddle.net/f1qnjwd3/1/

还有几个注意事项：

  • 在您的有序列表中，您缺少一个开始<a>标签。
  • 在我的演示中，高度仅用于演示目的。它们可能无法完美对齐，因为我并没有尝试创建完美的布局，只是说明了这个答案的工作原理。
于 2015-10-19T15:18:10.840 回答