دایره های کنار هم - فراغیب

<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: flex-start; width: 100%; margin: 10px 0;">
    <!-- نکته فنی: مقدار gap در div اصلی بالا را می‌توانید به 1px یا 0px کاهش دهید -->

    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 22%; min-width: 120px; gap: 2px;">
        {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
        {{#if:{{{کپشن1|}}}|
        <div style="font-size: 1em; text-align: center; line-height: 1.4;">{{{کپشن1}}}</div>
        }}
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 22%; min-width: 120px; gap: 2px;">
        {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
        {{#if:{{{کپشن2|}}}|
        <div style="font-size: 0.9em; text-align: center; line-height: 1.4;">{{{کپشن2}}}</div>
        }}
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 22%; min-width: 120px; gap: 2px;">
        {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
        {{#if:{{{کپشن3|}}}|
        <div style="font-size: 0.9em; text-align: center; line-height: 1.4;">{{{کپشن3}}}</div>
        }}
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 22%; min-width: 120px; gap: 2px;">
        {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
        {{#if:{{{کپشن4|}}}|
        <div style="font-size: 0.9em; text-align: center; line-height: 1.4;">{{{کپشن4}}}</div>
        }}
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 22%; min-width: 120px; gap: 2px;">
        {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
        {{#if:{{{کپشن5|}}}|
        <div style="font-size: 0.9em; text-align: center; line-height: 1.4;">{{{کپشن5}}}</div>
        }}
    </div>
</div>