[英]How can I float right a div of inline-flex without using float?
[英]Align div/text right using inline-flex
我有一些使用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>
SCSS:
.links-container {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
}
对于后代,您的 SCSS 的 rest
/* 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);
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.