CSS Flexコンテナーの使い方

1. Flexコンテナーの作成: まずは、Flexコンテナーを作成するための基本的なスタイルを定義します。以下のコード例を参考にしてください。

.container {
  display: flex;
}

2. メイン軸とクロス軸の方向の指定: Flexコンテナーの方向を指定することができます。以下の例では、メイン軸の方向を水平（row）に、クロス軸の方向を垂直（column）に指定しています。

.container {
  flex-direction: row;
}

3. アイテムの配置方法の指定: Flexコンテナー内のアイテムの配置方法を指定することができます。以下の例では、アイテムを中央揃えに配置しています。

.container {
  justify-content: center;
  align-items: center;
}

4. アイテムの順序の変更: Flexコンテナー内のアイテムの順序を変更することができます。以下の例では、2番目のアイテムを最初に表示します。

.container {
  order: 1; /* 2番目のアイテム */
}
.item:nth-child(2) {
  order: -1; /* 最初に表示 */
}

5. アイテムの伸縮と幅の指定: Flexコンテナー内のアイテムの伸縮と幅を指定することができます。以下の例では、2つのアイテムを等しい幅で表示します。

.container {
  flex-wrap: nowrap; /* アイテムを折り返さない */
}
.item {
  flex: 1; /* 幅を均等に伸縮 */
}

これらは、Flexコンテナーの基本的な使い方と一部のコード例です。さらに詳細な設定や応用的な使い方については、公式のCSS Flexboxのドキュメントやチュートリアルを参考にすることをおすすめします。