マヌエル・マツゾビッチ: max() 策略

経由で マヌエル・マツゾビッチによる投稿 これはデモによるものです テマニアフィフ.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

ここで起こっているすべてのことのマヌエルの内訳を読むことをお勧めしますが、基本的には、この長い構文と同等になります。

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…どこ：

• max（） CSS 数値のコンマ区切りリストを受け入れます。適用される値は最大です (または MDNはそれを置きます、「最もポジティブ」) セット内の XNUMX つ。
• 0px セットの最初の値であり、最小値が常に XNUMX ピクセルより大きくなるようにします。
• (100% - 64rem) セットの XNUMX 番目の「値」ですが、計算として表されます ( calc() は不要) を引く max-width 要素の (64rem) 利用可能な完全な状態から width (100%）。 残っているのは、要素によって占有されていないスペースです。
• ((100% - 64rem) / 2)) 要素のインライン境界間で分割しているため、残りのスペースを均等に分割します。
• max(0px, ((100% - 64rem) / 2)) 比較する 0px & (100% - 64rem) / 2). 最大値が使用されます。 ほとんどの場合、それが方程式の結果になりますが、 64rem 要素のフルの計算値よりも大きい 100% 負の値にならないように、その値をゼロにロックします。
• margin-inline 要素のインライン側にマージンを適用する勝者の値が設定するプロパティです。これは、同じ値を margin-left & margin-right 物理的特性。

同じような考え方です クリスは少し前に共有しました CSSを使用するもの max()を解決する機能 「内なる問題」 — フルブリードの背景色をサポートしながら、その中のコンテンツを制限するコンテナ padding.

max(), calc(), margin-inline…それは多くの新しい CSS です! そして、マヌエルはまさにその真ん中にいます これらおよびその他の最新の CSS 機能について 100 日間にわたって執筆.

ダイレクトリンク→