边距上的自动不适用于flex

Question

我想使用margin-top：auto;在列底部制作社交媒体图标。

我试图降低障碍，但是没有成功，我在源代码中包含了一个jsfiddle。我只是想使用margin-top：auto;

将社交图标（黑盒）与底部对齐

.team .thumbnails {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
} 

.team .thumbnails .social-inline {
  padding: 0;
  background: #000;
  margin-top: auto;
}

Jfiddle示例：

http://jsfiddle.net/hj5f2nr9/13/

Answer 1

您需要使flexbox弯曲，以便dd_1 .social成为flex子代。

ul

http://jsfiddle.net/hj5f2nr9/33/

flexbox绑定将保留您要查找的flex行为，直到.profile, .thumbnail,.caption {display:flex;flex:1;flex-direction:column;} 的父容器为止。

注意：您可以简化HTML结构以避免太多的麻烦;）