The other way round

お疲れ様です ('0')/

> 青・緑・紫は左右で一致をしています〜

まず、雛形の通りにコードを書くようにしてくださいね。でないと難しいmargin調整がさらに難しくなります。

×
<div style="display: flex; flex-flow: column;">
<p style="order: 2;">flex子要素</p>
<p style="order: 3;">flex子要素</p>
<figure style="order: 1;">ブログカード</figure>
</div>

✔
<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章
<p>文章
<p>
.
.
.
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

・ p要素をflexの直系子要素にしない
・ order: 3 は不要(200文字を超えたと思う時点でflexを終了させてください。でないと最終要素までflexの影響を受け、思うようなスタイリングにできない可能性があります。さらにできれば『追記』を活用してください)

-----
今の状態だとflexの直系子要素は3つあります。
① 1番目記述
② 2番目記述
③ 3番目記述(ブログカード)

①②③はそれぞれ兄弟関係ですが、flexの子要素なので [太字]marginは相殺されません。[/太字]
[太字]親とのmarginも相殺されません。[/太字]
(通常記事の方にオレンジの余白が無い点については参考記事の「margin消失と思ってしまうパターン」を熟読してください)

https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_flex_mn.png

-----
どうするか、なんですけども、akiさんのアイデア「ネガティブマージン」はあまりおすすめできません。記事部位のmarginが必ずしもmarginとは限りませんし、marginだとしても必ず20pxとは限りませんので、テンプレート変更時に困ってしまう可能性があります。

なので、flex内の場合はブログカードのmarginを減らす(style属性で指定)という単純な方法をおすすめします。

あとはアドバイスになります。
marginの確認をする際にはflexでもそうでなくてもborderをつけるという方法は避けた方が良いですね。borderにはもともと「margin相殺を阻害する・防ぐ」という特徴がありますし、子要素のmarginが親要素にも影響するのだという点も見落としてしまいます。

例えばオレンジの部位はまるで親要素についているように見えますが実際には子要素の方についているmarginです。
margin調整についてはmarginの仕組みを熟読して理解する、という方法しかありませんので、なんとか頑張ってくださいね ^^;

子要素内(本来はpではなくdivで作成するようにしてください)にp要素が複数入る場合は、最初のp要素は margin: 0; それ以降は margin-bottom: 0; を指定すると良いですね(最後のp要素のmargin-bottomをどうするかはその時々で変わるかもしれません)

くれぐれも理想は

本文は

<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章200文字以上</p>
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

残りは全て追記へ

という形です。追記をうまく利用するとOGPの操作が非常に楽になります。
(内緒さんの特殊な希望を優先される場合にはOGP操作はできません)

あともう一つアドバイスです。[太字]雛形がある場合に要素名を置き換えない[/太字]

例)
<div>文章</div>

という何らかの装飾のついたhtmlがあるとします。そして文章にはp要素を用いたいという場合はdivをpに置き換えてしまうのではなく

とこのようにしてください。変更して問題無い場合もありますが、原則として「やらない」を心がけた方が良いです。特にdiv要素とp要素は性質が全く違いますので置き換えは避けましょう ('0')/

管理者にだけ表示を許可する