每四个元素后动态打破弹性框[重复]

Posted

技术标签:

【中文标题】每四个元素后动态打破弹性框[重复]【英文标题】：dynamically break flexbox after every fourth element [duplicate] 【发布时间】：2021-01-10 13:06:28 【问题描述】：

我正在尝试设计一个元素，其中弹性框中有多张卡片，并且在每第四张卡片之后我需要打破该行，以便接下来的四张卡片在第一行下方共享另一行，这将持续下去元素容器内每隔四张卡片。我部分实现了它，但现在所有卡片都进入一张卡片，下一组卡片再次进入同一行的一张卡片，而不是改变列并形成下一行。看看下面的图片，可以更清楚地了解我在这里想要实现的目标。

    <div class="content__card">
          <div class="card">
            <img
              src="#"
               class="card__image">
            <p class="card__name">Lily-Grace Colley</p>
            <div class="grid-container">
    
              <div class="grid-child-posts">
                156 Post
              </div>
    
              <div class="grid-child-followers">
                1012 Likes
              </div>
            </div>
            <ul class="social-icons">
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#"><i class="fa fa-codepen"></i></a></li>
            </ul>
            <button class="btn draw-border">Follow</button>
            <button class="btn draw-border">Message</button>
          </div>
          <p class="breaker"></p>
    
          <div class="card">
            <img
              src="#"
               class="card__image">
            <p class="card__name">Lily-Grace Colley</p>
            <div class="grid-container">
    
              <div class="grid-child-posts">
                156 Post
              </div>
    
              <div class="grid-child-followers">
                1012 Likes
              </div>
            </div>
            <ul class="social-icons">
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#"><i class="fa fa-codepen"></i></a></li>
            </ul>
            <button class="btn draw-border">Follow</button>
            <button class="btn draw-border">Message</button>
          </div>
          <p class="breaker"></p>
           
           <div class="card">
            <img
              src="#"
               class="card__image">
            <p class="card__name">Lily-Grace Colley</p>
            <div class="grid-container">
    
              <div class="grid-child-posts">
                156 Post
              </div>
    
              <div class="grid-child-followers">
                1012 Likes
              </div>
            </div>
            <ul class="social-icons">
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#"><i class="fa fa-codepen"></i></a></li>
            </ul>
            <button class="btn draw-border">Follow</button>
            <button class="btn draw-border">Message</button>
          </div>
          <p class="breaker"></p>
           </div>

CSS

    .content__card 
      display: flex;
       margin-top: 2%;
      
        
     .breaker 
          display: none;
        
     .breaker:nth-child(4n) 
          display: block;
          width: 100%;
          height: 0;
        
    .card 
      background-color: #222831;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: rgba(0, 0, 0, 0.7);
      color: white;
      overflow: auto;
    
    .grid-container 
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
      font-size: 1.2em;

【问题讨论】：

【参考方案1】：

不需要breaker。

<p class="breaker"></p>

而不是使用flex-basis 和max-width 来卡片

.card 
  margin:2%;
  flex-basis:calc(25% - 4%); // minus the margin both right and left
  max-width:calc(25% - 4%); // minus the margin both right and left

ma​​x-width:calc(25% - 4%); - 如果我们取了 25%，即 -> 25% * 4 card = 100% .这里添加左右边距 2% 所以，减去宽度我们得到这个。

也改变

 box-shadow: rgba(0, 0, 0, 0.7);

到

box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);

因为，

box-shadow CSS 属性在元素的框架周围添加阴影效果。您可以设置以逗号分隔的多个效果。盒子阴影由相对于元素的 X 和 Y 偏移量、模糊和扩散半径以及颜色来描述。

.content__card 
  display: flex;
  margin-top: 2%;
  flex-wrap: wrap;


.card 
  background-color: #222831;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  text-align:center;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);
  color: white;
  overflow: auto;
  margin:2%;
  flex-basis:calc(25% - 4%);
  max-width:calc(25% - 4%);

.grid-container 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  font-size: 1.2em;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="content__card">
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>

    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>

     <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
    <div class="card">
      <img
        src="#"
         class="card__image">
      <p class="card__name">Lily-Grace Colley</p>
      <div class="grid-container">

        <div class="grid-child-posts">
          156 Post
        </div>

        <div class="grid-child-followers">
          1012 Likes
        </div>
      </div>
      <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      </ul>
      <button class="btn draw-border">Follow</button>
      <button class="btn draw-border">Message</button>
    </div>
    
</div>

【讨论】：

【参考方案2】： 

.content__card 
        display: flex;
        margin-top: 2%;
        flex-wrap: wrap;
      

      .breaker 
        display: none;
      
      .breaker:nth-child(4n) 
        display: block;
        width: 100%;
        height: 0;
      
      .card 
        background-color: #222831;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.7);
        color: white;
        overflow: auto;
        margin: 10px 3px;
      
      .grid-container 
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        font-size: 1.2em;
      
<body>
    <div class="content__card">
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>

      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>

      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
      <div class="card">
        <img src="#"  class="card__image" />
        <p class="card__name">Lily-Grace Colley</p>
        <div class="grid-container">
          <div class="grid-child-posts">
            156 Post
          </div>

          <div class="grid-child-followers">
            1012 Likes
          </div>
        </div>
        <ul class="social-icons">
          <li>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-codepen"></i></a>
          </li>
        </ul>
        <button class="btn draw-border">Follow</button>
        <button class="btn draw-border">Message</button>
      </div>
    </div>
  </body>

试试这个

【讨论】：

【参考方案3】：

为什么不flex-wrap: wrap ？看这里 https://codepen.io/yael-screenovate/pen/abNXWvj

【讨论】：

以上是关于每四个元素后动态打破弹性框[重复]的主要内容，如果未能解决你的问题，请参考以下文章

将元素与每个弹性框的中心底部对齐[重复]

带有弹性框的基于列的网格[重复]

Flex 框问题 - 溢出时中心元素被截断 [重复]

如何使用弹性框重新排序 div？

在flexbox中的两个兄弟之间居中元素[重复]

我想在 Slack 每四个小时后为 grafana 图表设置警报