Flexbox でのテキストの縦方向の配置に「align-self: center」ではなく「align-items: center」を使用するのはなぜですか?

フレックスボックス内のテキストの垂直方向の配置

フレックスボックス内でテキストを垂直方向に配置しようとする場合、align-self: center を使用すると、期待どおりの結果が得られない場合があります。代わりに、align-items: center を利用して垂直方向の配置を効果的に実現することをお勧めします。

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;  /* Use align-items instead of align-self */
  background: silver;
  width: 100%;
  height: 20%;
}

align-items: center を使用するとフレックス コンテナに直接影響しますが、align-self: center はフレックス アイテムに適用できます。この場合、li はフレックス コンテナを確立するため、align-items: center は子要素を垂直方向に適切に配置します。

<ul>
  <li>This is the text</li>
</ul>

要約すると、フレックスボックス内のテキストの垂直方向の配置については、align-items: center を align- と置き換える必要があります。自分：センター。これにより、親フレックス コンテナが子要素を垂直方向に適切に配置し、望ましい位置合わせ効果が得られます。

以上がFlexbox でのテキストの縦方向の配置に「align-self: center」ではなく「align-items: center」を使用するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。