flexbox align items mess

i'd like to get similar effect to my sketch.

https://postimg.org/image/o03qu4tpp/

The man always should be placed at right bottom corner of header. And the caroussel should be on the center/center-left position ( 50% of header height) .

I added new class (pad4) to my header container, and used flexbox.

display: flex;

justify-content: flex-end; align-items: flex-end;

And now, a man is on left bottom corner and the text is on top-right corner. I don't know how to fix it now. Because when I use margin or padding, nothing happens.

Site : http://jarmor.webd.pl/designs/kovta/agency2a.html


display: flex has to be applied to a parent element, so that the children are considered as flex elements. Therefore, you should apply display: flex; align-items: flex-end; display: flex; align-items: flex-end; to your <header> element. Then, apply align-self: center to the slider container (div.container-fluid.pad4 in your case). The result is following: 结果

链接地址: http://www.djcxy.com/p/76040.html

上一篇: 居中被滚动条宽度抛出

下一篇: flexbox对齐项目混乱