要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。
display: flex| flex | display: flex |
| inline-flex | display: inline-flex |
.container {
display: flex;
justify-content: center;
align-items: center;
}子要素を水平・垂直中央に配置する最も簡単な方法
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}ナビゲーションバー：左端と右端に要素を配置
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}レスポンシブなカードレイアウト：幅が足りない場合は折り返し
.sidebar-layout {
display: flex;
}
.sidebar {
flex: 0 0 250px;
}
.main {
flex: 1;
}サイドバーレイアウト：固定幅サイドバーと可変メインコンテンツ
中央配置、等間隔配置、レスポンシブレイアウトが簡単に実現できる。子要素にflex: 1を指定すると等幅になる。gap プロパティで間隔調整が便利。
親要素にdisplay: flexを指定し忘れると子要素のflexプロパティが効かない。flex-direction を理解せずに使うと意図しない配置になる。
AIの定番ミスはflex-direction: columnにしたときにjustify-contentとalign-itemsの軸が入れ替わる点の混同です（justify-contentは常に主軸方向）。「縦中央にしたいのに効かない」場合はまず方向と軸の対応を疑ってください。
flex-direction: columnのコンテナで子要素を縦横中央にしたい。justify-contentとalign-itemsの軸を間違えずに書いて
このflexレイアウトが折り返したときに崩れる原因を、flex-wrapとalign-contentの観点で調査して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。