当必须弯曲包装时，请更改元素布局

我正在尝试创建社交媒体链接，并让它们一开始就对齐。当它们开始包装时，我希望它以Z字形排列链接。例如，如果有5个链接，并且它们必须包裹的窗口很小，则链接的位置将从一条线变为一条"线"；W"；形状

.container {
max-width: 400px;
padding: 4em;
margin: 0 auto;
}
.c-socials__list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-left: 0;
margin: 0;
}
.c-socials__list__item {
padding: 0 0.5em;
}
.c-socials__list__item a {
display: block;
color: white;
background-color: #353535;
padding: 1.25em;
border-radius: 50%;
transition: background-color 300ms ease-out;
}
.c-socials__list__item a:hover, .c-socials__list__item a:focus {
background-color: red;
}
.u-list-unstyled {
list-style: none !important;
}
.u-list-horizontal > * {
display: inline-block !important;
}

<div class="container">
<div class="c-socials">
<ul class="u-list-unstyled u-list-horizontal c-socials__list">
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
</ul>
</div>
</div>

注意：如果需要的话，我可以移动到不同的方向或使用javascript来调整布局。

我想添加类名，并在那里添加位置，但你必须设置好它才能做出响应，我希望这能帮助你，我的朋友

.container {
max-width: 400px;
min-height: 100vh;
padding: 4em;
margin: 0 auto;
}

.c-socials__list {
flex-wrap: wrap;
justify-content: space-around;
padding-left: 20;
margin: 0;
position: relative;
}
.c-socials__list__item {
padding: 0 0.5em;
}
.c-socials__list__item a {

color: white;
background-color: #353535;
padding: 1.25em;
border-radius: 50%;
transition: background-color 300ms ease-out;
}
.c-socials__list__item a:hover, .c-socials__list__item a:focus {
background-color: red;
}

.u-list-unstyled {
list-style: none !important;
}

.u-list-horizontal > * {
display: inline-block !important;
}

.zig-zag {
margin-right: 40px;
}
.zig-zag  a{
position: absolute;
top: 60px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-socials">
<ul class="u-list-unstyled u-list-horizontal c-socials__list">
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item zig-zag"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
<li class="c-socials__list__item zig-zag"><a href="#">hi</a></li>
<li class="c-socials__list__item"><a href="#">hi</a></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：