Question

所以我有一个社交图标列表，其中3个在第一行，另外2个应该换行到下一行，他们这样做。然而问题是它们在不正确“间隔”的情况下取代。有没有办法在正确的代码中解决这个问题？我知道我可以再做一行，把它们放在那里，但我认为这不是干净的代码。

（顺便说一句，这适用于小屏幕，所以如果你测试它，你需要缩小屏幕尺寸）

CSS：

#contactlist {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 list-style-type: none;
 justify-content: space-between;
 margin: 0 auto;
 padding: 0;
 width: 75%;
}

#contactlist img {
 display: block;
 height: 80px;
 margin: 10px auto;
 width: 80px;
}

HTML：

<ul id="contactlist"
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
</ul>

Answer 1

IMO，你的flex属性正在做正确的事情。输出是应该的。您可以做的一件事是删除justify-content属性，它将显示您想要的方式。并为图像提供边距，以便它们之间有空间。更多代码如下..

#contactlist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0 auto;
  /*   justify-content: space-around; */
  padding: 0;
  background: red;
  width: 300px;
}
#contactlist li {
  /*   margin:  1px; */
  /*   background: yellow; */
  /*   align-items: flex-end; */
}
#contactlist img {
  display: block;
  height: 80px;
  /*   margin: 10px auto; */
  margin: 5px;
  width: 80px;
}

<ul id="contactlist" <li>
  <a href="https://www.instagram.com/maikvv/">
    <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
</ul>

Answer 2

我认为您需要在旧学校中编写代码。使用float: left;。 Flexbox在safari和IE11中仍然存在问题。这是旧的学校代码。

此代码对所有浏览器和所有设备都100％响应。

我避免在这种情况下使用flexbox。

＆＃13;

#contactlist {
  display: table;
  list-style-type: none;
  padding: 0;
  background: red;
  width: 100%;
}
#contactlist li {
  float: left;
  margin-bottom: 10px;
}
#contactlist li:not(:last-child){
  margin-right: 10px;
}
#contactlist li a{
  display: block;
  margin: 0;
  padding: 0;
}
#contactlist img {
  display: block;
  max-width: 100%;
  height: autuo;
  
}

＆＃13;

<ul id="contactlist"> <li>
  <a href="https://www.instagram.com/maikvv/">
    <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
    <li>
      <a href="https://www.instagram.com/maikvv/">
        <img src="http://placehold.it/80x80" </a>
    </li>
</ul>

＆＃13;

希望得到这个帮助。

将物品包裹到下一行，并保持相等的空间

2 个答案: