フレックスボックス内のアイテムの配置は同じではありません

Question

イメージの2番目の行が最初の行と異なる動作をするのはなぜですか？スペース間：

これは

<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; 
} 

のようなマークアップとCSSの外観は私が正当化-コンテンツを使用することによってそれを修正できると考え方法です。 http://almaweby.cz/reference.html私はflexboxを使う必要がありますが、私はそれをカラムに入れたいと思います。

Answer 1

それはむしろ私たちを期待するよりも、あなたの問題を示している[MCVE]が含まれるようにあなたの質問を編集してください異なる振る舞いをするために第2ラインを引き起こすmargin-right: 10pxとwidth: 30%あるので、この

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