私も同じように混乱しました。上記の答えの多くに基づいていじくり回した後、ようやく違いがわかります。私の控えめな意見では、この区別は、次の2つの条件を満たすフレックスコンテナーで最もよく示されます。
- フレックスコンテナー自体に高さの制約（例：）があるため、コンテンツに対して高すぎる
min-height: 60rem可能性があります
- コンテナに含まれる子アイテムの高さが不均一です
条件1はcontent、親コンテナーとの関係を理解するのに役立ちます。コンテンツがコンテナと同じ高さになると、からの配置効果を確認できなくなりますalign-content。交差軸に沿って余分なスペースがある場合にのみ、その効果がわかります。これは、コンテンツを親コンテナーの境界を基準に配置します。
条件2は、次の効果を視覚化するのに役立ちますalign-items：アイテムを互いに相対的に配置します。
次にコード例を示します。原材料は、Wes BosのCSSグリッドチュートリアル（21. FlexboxとCSSグリッド）から取得
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">💩</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}
例1：コンテンツがコンテナと揃うようにビューポートを狭めましょう。これは、align-content: flex-start;コンテンツブロック全体がコンテナ内にぴったり収まるため、影響がない場合です（再配置する余地はありません！）
また、2行目に注目してください。アイテムがどのように中央揃えされるかを確認してください。
例2：ビューポートを拡大すると、コンテナー全体を埋めるのに十分なコンテンツがなくなります。次に、-- align-content: flex-start;it の効果を確認し始めます。コンテンツはコンテナーの上端を基準にして配置されます。
これらの例はflexboxに基づいていますが、同じ原則がCSSグリッドにも適用されます。お役に立てれば ：）
