项目在 flexbox 中的放置是不一样的

Question

为什么第二行图像的移动方式与第一行不同？

这是标记和 CSS 的样子

<div class="hook">
        <div><img class="nahledy" src="fotky/masaze-iren.jpg"></div>
        <div class="popis" style="display: none;">
        <h3 class="zrus H3Left">Web pro masáže</h3>
        <a class="OdkazReference" href="http://www.masaze-iren.cz" target="_blanc">www.masaze-iren.cz</a>
        <p><b>Zadání práce:</b><br>Nový web nahradil původní web zákazníka, který byl již velice zastaralý. Cílem bylo vytvořit přehledný web s nabídkou služeb, dobře dohledatelný přes Google a Seznam. Respozivní design pro zobrazení na mobilních telefonech. Redakční systém pro editaci údajů zákazníkem.<br>Webdesign- typizovaná šablona + dodatečná úprava některých prvků kódováním.</p>
        <img class="referenceIMG" src="fotky/nikdo.png">
        <p class="referenceTXT">„Nové stránky jsou krásné a nedají se srovnávat s těmi starými. Díky nim a dobrému dohledání na Seznamu jsem získala již po 14 dnech objednávku, která mi zaplatila podstatnou část investice do webu.“</p>
        </div>
</div>

.hook {
    width: 30%;
    margin-right: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

我认为我可以通过使用 justify-content: space-between 来修复它。 http://almaweby.cz/reference.html 我需要使用 flexbox，但我想把它放在列中。

Answer 1

导致第二行行为不同的是 margin-right: 10px 和 width: 30%，因此请将您的 hook 规则更改为此

.hook {
    width: 33%;                  /*  changed from 30%  */
    /* margin-right: 10px;           removed           */
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

项目在 flexbox 中的放置是不一样的

Placement of items in flexbox isn´t same

html

css

position

flexbox