我正在使用flex和transition来尝试实现某些目标。
以前从未使用过flex,但认为它可能与我想要实现的目标配合得很好。
请看小提琴
我试图实现的是当您将鼠标悬停在框上时,底部栏覆盖框(这有效),标题和文本过渡到框的中心。这是一半的工作。
它们水平居中,但不是我想要的垂直居中。文本在中心应更靠近。
这甚至可能还是我做错了什么?
.html
<a href="#" class="box-link row">
<div class="overbox row">
<h4>This is a title</h4>
<p>Lorem ipsum dolor sit amet, usu debet tation cu. Eam assum habemus dignissim ne</p>
</div>
</a>
.css
.box-link {
display: flex;
flex: 1 1 0px;
flex-flow: row wrap;
width: 19.8125rem;
height: 19.8125rem;
position: relative;
overflow: hidden;
background:red;
text-align: center;
border:1px solid red;
}
.box-link .overbox {
align-items: center;
justify-content: center;
transition: 0.5s ease-in-out;
background-color: rgba(255, 255, 255, 0.6);
min-height: 15%;
width: 100%;
padding: 0.9375rem;
position: absolute;
top: 85%;
left: 0;
display: flex;
flex-flow: row wrap;
}
.box-link:hover .overbox {
min-height: 100%;
position: absolute;
top: 0;
left: 0;
}
h4 {
margin:0;
}
悬停时,由于填充声明,文本相对于容器略微右对齐。
有关说明,请从容器元素 ( .box-link
) 中删除overflow: hidden
。
演示
如果从.overbox
中删除padding: 0.9375rem
,则两个框都对齐,并且文本水平居中。
演示
弹性项没有更紧密地垂直居中的原因是因为在具有 flex-direction: row
的多行柔性容器上,柔性对齐由 align-content
属性控制,而不是align-items
。这是你所拥有的:
.box-link .overbox {
align-items: center;
justify-content: center;
...
...
...
display: flex;
flex-flow: row wrap;
}
当交叉轴中有多条线时要使用的属性是 align-content
。
将此添加到您的 CSS 中:
.box-link .overbox {
align-items: center;
justify-content: center;
align-content: center; /* NEW */
...
...
...
display: flex;
flex-flow: row wrap;
}
演示
从规格:
8.3. 跨轴对齐:
align-items
和align-self
属性
align-items
设置弹性容器的所有项目(包括匿名弹性项目)的默认对齐方式。align-self
允许为单个弹性项目覆盖此默认对齐方式。8.4. 包装柔性线:
align-content
财产
align-content
属性在 当交叉轴上有额外空间时,柔性容器,类似于justify-content
如何对齐主轴内的各个项目。 请注意,此属性对单行弹性容器没有影响。