Flexbox `align-items`: `flex-start` と `baseline` – いつどちらを使用する必要がありますか?

フレックススタートとベースラインの区別を理解する

フレックス -align プロパティを利用する場合、フレックススタートとベースラインの区別がつかない場合がありますすぐに明らかになる。これは、一貫したフォント サイズまたは同等のコンテンツを含む多くの状況では、両方の値が同じ配置になるように見えるためです。ただし、さまざまなコンテンツ サイズを扱うときに明らかになる重要な違いがあります。

flex-start Alignment

flex-start 値は、flex アイテムを交差軸の開始エッジに配置します。フレックスコンテナ。この配置は通常、水平レイアウトではフレックス アイテムの左端を、垂直レイアウトでは上端を配置します。

ベースライン配置

対照的に、ベースライン値は、コンテンツのベースラインに従ってフレックス アイテムを配置します。ベースラインとは、ほとんどの文字が置かれ、その下にディセンダーが延びる線を指します。フレックス アイテムは、ベースラインが揃うように配置され、ベースラインとクロススタート マージン エッジの間の距離が最も大きいアイテムがクロススタート エッジに対して同一平面上に配置されます。

アプリケーションの違い

フレックススタートとベースラインアライメントのどちらを選択するかは、意図する効果によって異なります。フレックススタートは、要素を一定のサイズに揃える場合に適しています。一方、ベースラインの配置は、すべての項目でベースラインが確実に同じになるため、さまざまなフォント サイズの要素を処理する場合に特に便利です。

デモの例

次のコード スニペットを考えてみましょう。 :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 300px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {
  font-size: 2em;
}
.item2 {
  font-size: 7em;
}
.item3 {
  font-size: 0.5em;
}
.item4 {
  font-size: 3em;
}
.item5 {
  font-size: 10em;
}

ベースライン配置が適用されると、フレックス項目はそれぞれのベースラインに沿って配置されます。仕様に従って、配置が最も高いアイテム (アイテム 5) によってどのように影響されるかに注目してください。破線は、フレックス項目全体のベースラインを表します。

以上がFlexbox `align-items`: `flex-start` と `baseline` – いつどちらを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。