flexbox中项目的放置不一样答案

【问题标题】：Placement of items in flexbox isn´t sameflexbox中项目的放置不一样
【发布时间】：2017-02-21 03:03:57
【问题描述】：

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

这就是标记和 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，但我想在列中使用它。

【问题讨论】：

请编辑您的问题以包含一个 minimal reproducible example 来说明您的问题，而不是期望我们在您的源代码中扎根。
通常人们使用flexbox是因为他们选择这样做，而不是因为他们需要这样做。为什么你需要使用它？不要误会我的意思，我完全赞成并强烈推荐它，但你的措辞有点不寻常。请提供您的代码示例，我们无法检查图片，因此无法判断您的代码缺少什么，除非我们有机会查看它。
当外部链接失效时，问题变得毫无用处，所以发布一个最小的代码 sn-p 代替，我会发布一个修复它的答案（发现问题已经在链接中）
@Shaggy 我无法制作示例代码，因为我不知道哪里出错了。如果我把我的代码做一个简短的部分，那么它就可以工作。
@AndreiGheorghiu 我需要使用它，因为没有它，我的整个位置和工作感都消失了

标签： html css position flexbox

【解决方案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;
}

【讨论】：