flexbox对齐项目混乱

我想得到与我的素描类似的效果。

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

该男子总是应该放在标题的右下角。 卡鲁塞尔应该位于中心/中心左侧位置(标题高度的50%)。

我添加了新的类(pad4)到我的标题容器中,并使用了flexbox。

display: flex;

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

现在,一个男人在左下角,文字在右上角。 我现在不知道如何解决这个问题。 因为当我使用边距或填充时,没有任何反应。

网站:http://jarmor.webd.pl/designs/kovta/agency2a.html


display: flex必须应用于父元素,以便将子元素视为弹性元素。 因此,您应该应用display: flex; align-items: flex-end; display: flex; align-items: flex-end; 到你的<header>元素。 然后,将align-self: center到滑块容器(在您的案例中为div.container-fluid.pad4)。 结果如下: 结果

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

上一篇: flexbox align items mess

下一篇: Flexbox auto margins don't work with justify