Left alignement FLEX-CodePudding

I hope someone could help me please. I would like to align the blocks to left, I've used flex with "justify-between" to have spaces between automatically but the problem is that the last row made 2 blocks with one space huge space with nothinG.

print SCREEN OF THE PROBLEM

MY css:

list-style-type: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

My code:

{# LPs listing #}
<ul>
  {% for item in module.resources_block %}
  <li>
    <div >
      <div >  
        <div>
         <span >{% inline_text field="tag" value="{{ item.tag }}" %}</span>
        <h3>
          {% set href = item.link_field.url.href %}
          {% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
          {% set href = "mailto:"   href %}
          {% endif %}
          <a href="{{ href }}"
             {% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
             {% if item.link_field.rel %}rel="{{ item.link_field.rel }}"{% endif %}
             >
            {% inline_text field="title" value="{{ item.title }}" %}
          </a>
        </h3>
        {% inline_text field="description" value="{{ item.description }}" %}       
        </div>
        <div>
          {% set href = item.link_field.url.href %}
          {% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
          {% set href = "mailto:"   href %}
          {% endif %}
          <a  href="{{ href }}"
             {% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
             {% if item.link_field.rel %}rel="{{ item.link_field.rel }}"{% endif %}
             >
            {% inline_text field="cta_text" value="{{ item.cta_text }}" %}
          </a> 
        </div>
      </div>
    </div>
  </li>
  {% endfor %}
</ul>
{# End LPs listing #}

How to do it with flex? but keeping the automatic space-between and the spaces (margin) between.

CodePudding user response：

remove justify-content & margin and add gap:20px this should fix the issue

list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap:20px

or just use justify-content:flex-start instead of justify-content:space-between