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:
上一篇: 居中被滚动条宽度抛出
下一篇: flexbox对齐项目混乱