margin-top auto not working with flex

Question

I want to make the social media icons at the bottom of the column using margin-top: auto;

I have tried to push the block down but haven't had any success I've included a jsfiddle with the source code. I would just like the social icons (the black box) to be aligned to the bottom using 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 example:

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

check the code and you will see that `social-inline` is not a direct child of a flex container so margin has no effect — Temani Afif, Aug 12 '18 at 08:48

score 1 · Accepted Answer · answered Aug 12 '18 at 08:51

you need to imbricate your flexbox , so the .social ul becomes a flex child.

.profile, .thumbnail,.caption {display:flex;flex:1;flex-direction:column;}

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

flexbox imbrication will preserve the flex behavior you look for until the parent container of .social.

Note: that you could simplify the HTML structure to avoid so much imbrication ;)

margin-top auto not working with flex

1 Answers1