flexbox align items mess

1
votes

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

1
htmlcssflexbox
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link to an example or site, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D

1 Answers

1
votes

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; to your <header> element. Then, apply align-self: center to the slider container (div.container-fluid.pad4 in your case). The result is following: The result