如何让每个帖子在响应屏幕尺寸时大小相等

Question

在帖子 div 内，会有多个帖子行。每行最多包含 4 个帖子。因此，当有 5 个帖子时，响应能力就会出现问题。前 4 个帖子（第一行）将响应屏幕尺寸，但第 5 个帖子（第二行）不会执行任何操作，因为还有空间供第 5 个帖子使用。

<div class="posts">
    {% if post %}
        {% for media in post %}
            {% if forloop.counter0|divisibleby:"4" %}
                <div class="post-row">
            {% endif %}
            <a id="post-wrapper" href="{% url 'sh-media' %}?pid={{media.pid}}">
                <div class="thumbnail-container">
                    <img src="{{ media.media_thumbnail.url }}" class="post-thumbnail">
                    <div class="gradient-overlay">
                        <h2 class="video-caption">{{ media.caption}}</h2>
                        <p class="video-description">{{ media.descr }}</p>
                    </div>
                </div>
            </a>
            {% if forloop.counter0|add:"1"|divisibleby:"4" or forloop.last %}
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<style>
    .posts{ 
        display: flex;
        flex-direction: column;
        color: #fff;
        padding-top: 15px;
        justify-content: flex-start;
    }
    .post-row{
        display: flex:
    }
    #post-wrapper{
        margin: 20px 10px;
    }
</style>

有没有办法让所有的帖子在响应屏幕尺寸时保持相同的尺寸？

输出 HTML：

<div class="posts">
    <div class="post-row">
                        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=060">
            <div class="thumbnail-container">
                <img src="/static/images/9_16%20Video.png" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">sea breeze</h2>
                        <p class="video-description">Winter morning sweet music</p>
                    
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=bea">
            <div class="thumbnail-container">
                <img src="/static/images/9_16%20Audio.png" class="post-thumbnail" >
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Winter</h2>
                        <p class="video-description">Winter morning sweet music</p>
                    
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=ba8">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/DSC_0354.JPEG" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Thousand years</h2>
                        <p class="video-description">A Thousand Years, a romantic song about the fear of falling in love, is a sleeper hit.</p>
                
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=731">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/martin-blaszkiewicz-fv8YJZ471kQ-unsplash.jpg" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Aurora Runaway</h2>
                        <p class="video-description">a song by Norwegian singer-songwriter Aurora</p>
                
                </div>
            </div>
        </a>
                        
    </div>
                        
    <div class="post-row">
                        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=46e">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/_c5eea445-cb7b-4aaa-8a8c-74a43e3c6561-transformed.jpeg" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">KungFu Panda</h2>
                        <p class="video-description">4k video of kungfu panda</p>
                
                </div>
            </div>
        </a>
                        
    </div>
                        
                    
                
</div>

Answer 1

您的

.post-row {display: flex:}

有错别字，所以我们会更正。然后将链接的 Flex 值设置为

flex: 0 0 25%

，使它们各自为宽度的 1/4

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.posts {
  display: flex;
  flex-direction: column;
  color: #fff;
  padding-top: 15px;
  justify-content: flex-start;
}

.post-row {
  display: flex;
  margin-bottom: 10px;
}

.post-wrapper {
  flex: 0 0 25%;
  border: 1px solid red;
  background: lightblue;
}

<div class="posts">
  <div class="post-row">

    <a class="post-wrapper" href="/watch-profile%23ed-media?pid=060">
      <div class="thumbnail-container">
        <img src="/static/images/9_16%20Video.png" class="post-thumbnail">
        <div class="gradient-overlay">

          <h2 class="video-caption">sea breeze</h2>
          <p class="video-description">Winter morning sweet music</p>

        </div>
      </div>
    </a>

    <a class="post-wrapper" href="/watch-profile%23ed-media?pid=bea">
      <div class="thumbnail-container">
        <img src="/static/images/9_16%20Audio.png" class="post-thumbnail">
        <div class="gradient-overlay">

          <h2 class="video-caption">Winter</h2>
          <p class="video-description">Winter morning sweet music</p>

        </div>
      </div>
    </a>

    <a class="post-wrapper" href="/watch-profile%23ed-media?pid=ba8">
      <div class="thumbnail-container">
        <img src="/media/media/Thumbnails/DSC_0354.JPEG" class="post-thumbnail">
        <div class="gradient-overlay">

          <h2 class="video-caption">Thousand years</h2>
          <p class="video-description">A Thousand Years, a romantic song about the fear of falling in love, is a sleeper hit.</p>

        </div>
      </div>
    </a>

    <a class="post-wrapper" href="/watch-profile%23ed-media?pid=731">
      <div class="thumbnail-container">
        <img src="/media/media/Thumbnails/martin-blaszkiewicz-fv8YJZ471kQ-unsplash.jpg" class="post-thumbnail">
        <div class="gradient-overlay">

          <h2 class="video-caption">Aurora Runaway</h2>
          <p class="video-description">a song by Norwegian singer-songwriter Aurora</p>

        </div>
      </div>
    </a>

  </div>

  <div class="post-row">

    <a class="post-wrapper" href="/watch-profile%23ed-media?pid=46e">
      <div class="thumbnail-container">
        <img src="/media/media/Thumbnails/_c5eea445-cb7b-4aaa-8a8c-74a43e3c6561-transformed.jpeg" class="post-thumbnail">
        <div class="gradient-overlay">

          <h2 class="video-caption">KungFu Panda</h2>
          <p class="video-description">4k video of kungfu panda</p>

        </div>
      </div>
    </a>

  </div>

</div>