我有一些使用display: inline-flex
的动画链接。在我想将它们向右对齐之前,此操作效果良好。我可以使用float: right
向右定位,但我想有更好的方法吗?
我试过justify-content: flex-end;
,它似乎不适用于inline-flex
?我很乐意使用display: flex
,但这会将我的链接扩展到100%宽,这是我不想要的,我无法采取任何措施来防止这种情况。
所以我有点困了。有人对解决这个问题的最佳方法有什么想法吗?感觉我错过了一些显而易见的东西。这是一个显示链接样式的CodePen。。。
链接:https://codepen.io/moy/pen/rNjbrYL
提前感谢!
好的,我们已经尝试过了,您在div中包含了所有链接,并为您的div制作了css:
display: flex;
flex-direction: column;
align-items: flex-end;
用display: inline-flex
将它们全部包裹在容器中
HTML:
<div class="links-container">
<a href="#" class="link">
<span class="link__label">
We Definitely Don’t Include..
</span>
</a>
<a href="#" class="link link--core">
<span class="link__label">
Follow Us
</span>
</a>
<a href="#" class="link link--core align-right">
<span class="link__label">
Align to the Right?
</span>
</a>
</div>
scs:
.links-container {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
}
为了子孙后代,您的SCSS 的其余部分
/* Global */
$blue: #0000c3;
$yellow: #f0f10d;
body {
box-sizing: border-box;
margin: 0 auto;
padding: 60px;
max-width: 1000px;
}
/* Link */
.link {
clip-path: inset(0 0 0 -12px);
color: $blue;
display: inline-flex;
align-items: center;
font-family: "Arial", sans-serif;
font-size: 18px;
font-weight: bold;
height: 32px;
line-height: 18px;
margin-bottom: 24px;
position: relative;
text-decoration: none;
&:before {
background: $yellow;
content: "";
height: 32px;
position: absolute;
//top: 50%;
left: -4px;
//transform: translate(0, -50%);
width: calc(100% - 28px); // still want 8px for padding
}
}
.link__label {
padding: 0 0 0 36px;
position: relative;
left: 0;
transition: all 0.16s ease-out;
&:before,
&:after {
background-color: $blue;
content: "";
height: 24px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
transition: all 0.16s ease-out;
width: 24px;
}
&:after {
right: -36px;
left: auto;
}
.link:hover & {
left: -36px;
&:before {
transform: translate(0, -50%) rotate(-180deg);
}
}
}
.link--core {
clip-path: inset(0 -4px 0 0);
text-align: right;
&:before {
right: -4px;
left: auto;
}
.link__label {
padding: 0 36px 0 0;
&:before {
left: -36px;
}
&:after {
right: 0;
}
}
&:hover {
.link__label {
left: 36px;
&:before {
transform: translate(0, -50%) rotate(0);
}
}
}
}