フレックスボックス内でテキストを垂直に揃えるにはどうすればいいですか? 質問する

Question

を使用する代わりにを使用しalign-self: centerますalign-items: center。

flex-direction変更したり使用したりする必要はありませんtext-align。

すべてが機能するように 1 つの調整を加えたコードは次のとおりです。

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%;
}

のalign-selfプロパティはフレックスアイテムに適用されます。ただし、親 ( ) にプロパティがないか適用されていないliため、はフレックスアイテムではありません。uldisplay: flexdisplay: inline-flex

したがって、はulフレックスコンテナーではなく、はliフレックスアイテムではないため、align-self効果はありません。

のalign-itemsプロパティはと似ていますが、フレックスコンテナーalign-selfに適用される点が異なります。

はliフレックスコンテナーなので、align-items子要素を垂直方向に中央揃えするために使用できます。

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

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

codepenデモ

align-items技術的には、その方法と仕組みは次のとおりですalign-self...

プロパティalign-items(コンテナ上) は、align-self(アイテム上) のデフォルト値を設定します。つまり、align-items: centerすべてのフレックスアイテムがに設定されることになりますalign-self: center。

ただし、個々の項目を調整することで、このデフォルトを上書きできますalign-self。

たとえば、列の高さを均等にしたい場合は、コンテナーをに設定しますalign-items: stretch。ただし、1 つの項目を上部に固定する必要があるため、に設定しますalign-self: flex-start。

例

テキストはフレックスアイテムですか?

一連のテキストがどのように機能するのか疑問に思う人もいるかもしれません...

<li>This is the text</li>

はの子要素ですli。

その理由は、インラインレベル要素によって明示的に囲まれていないテキストは、インラインボックスによってアルゴリズム的に囲まれるためです。これにより、匿名のインライン要素となり、親の子になります。

CSS 仕様より:

9.2.2.1 匿名インラインボックス

ブロックコンテナー要素内に直接含まれるテキストは、匿名のインライン要素として扱う必要があります。

flexbox 仕様でも同様の動作が規定されています。

4. フレックスアイテム

フレックスコンテナーの各インフローの子はフレックスアイテムになり、フレックスコンテナー内に直接含まれる連続したテキストの各実行は匿名のフレックスアイテムでラップされます。

したがって、内のテキストはliフレックスアイテムです。

Answer 1