Flexbox `align-items`: `flex-start` と `baseline` – いつどちらを使用する必要がありますか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-01 11:20:11

オリジナル

337 人が閲覧しました

Flexbox `align-items`: `flex-start` vs. `baseline` – When Should I Use Which?

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

フレックス -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 サイトの他の関連記事を参照してください。