表示プロパティのための新しい2値構文🪄

おい、たくさんのCSSアップデートは、我々の激怒するレベルを排水しようとします.同様に、我々はinline , block , inline-block , flex , flex 値display プロパティとブランドの新しい方法の構文は、新しい組み合わせを作るのに役立ちます.例えば、inline-flex or inline flex それは少し奇妙な右のようです.ああ、それはあなたがそれについて考えるように複雑ではない心配しないでください😉.

Disclaimer: Recommended to use FireFox Developer Browser.

だから、希望を読み続けると、後に感じている.

2つの値構文に直接移動する前に.第一に、我々は、外側と内側の値をマスターする必要があります.それから、我々は2つの価値構文に乱さない道を作ります.
外側と内側の値

外値は親がblock-level or inline-level .

(Outer value technically call as Box Value).

内部値は、そのボックスの子がどのように振る舞うかを説明します(これは子の書式設定コンテキストを決定します).

私はあなたの考えを得ることができます.書式設定コンテキスト🤔??だから、ほんの数秒の内側と外側の値のトピックを一時停止⏱️.
書式設定コンテキスト?単純な用語では、どのように動作し、ブロックの書式設定コンテキスト、インライン書式設定コンテキスト、flexの書式設定コンテキストを含む書式設定コンテキストのいくつかの種類があります.
例えば、

<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>

strong {
    margin: 20px;
    padding: 20px;
    border: 5px solid rebeccapurple;
}

上の例はインライン書式設定コンテキストを示します.ただ、上記の例からインライン書式設定コンテキストの動作を理解しようとします.

ボックスモデルはインライン書式設定コンテキストに参加する項目に完全に適用されませんmargin 要素の上下には適用されません.

水平padding , border and margin 要素に適用され、左と右のテキストを押します.

垂直padding and borders が適用されますが、上と下のコンテンツに重複する可能性があります.

あなたがインライン書式設定文脈を把握することを望みます.そのように、他の書式設定コンテキストの男は自分の道を振る舞う.正しい意味をなす💡.
我々が宣言するならば、外側と内部の価値にリバウンドしましょう

.parent-container {
display: flex;
}

または、

.parent-container {
display: block flex;
}

実際には両方とも同じです.ハハ、感じ

何も悪くないdisplay: block flex; . だって、宣言したらdisplay: flex デフォルト値block と内部値flex .

正確に我々が使うときdisplay: flex Flex Children(Flex Format Contectに参加している子)を使用して、ブロックレベルのコンテナー(親コンテナーが他の要素を保持します)を作成します.
例えば、
注意深く観察してください🥺「フレックスコンテナが互いのパターンの上でスタックのように居住したあと(互いのパターンの隣でない).
親コンテナーがそれぞれのパターンの横で動作したい場合は、外側の値を変更します.あなたはそれが何か推測できますか?変化するインライン?🤔.
あなたがインラインを推測するならば、あなたは正しいです👏🏻👏🏻. そうでなければ、巨大な問題ではない.display: inline-flex or display: inline flex 親コンテナがそれぞれのパターンの横に振舞うのを伝える.
例えば、
今、あなたは外側と内側の値と明確な印象を得る.それで、2値構文は何ですか?実際には、すでに数秒前に学んだ.
一価
二値
フレックス
ブロックフレックス
インラインフレックス
インラインフレックス
グリッド
ブロックグリッド
インライングリッド
インライングリッド
ブロック
ブロック流
インライン
インラインフロー

2値構文=明示的に外部値と内部値を定義する

By this way, you can create more new combination values for display property.

ブラウザサポート
すべてのブラウザで100 %の作業.実験モードでは、将来のCSSのライフを変更することを期待😍.

あなたがこのブログを愛しているならば💝そしてこのブログについて考えを落とす😍 それは本当に私にたくさん.あなたがスタイリング概念で快適でないと感じるならば、私はあなたとの議論が好きであるか、疑いを持ちません.
あなたが実験しない場合は、すぐに探索を開始します.
読んでくれてありがとう!
- CSSの生活をより簡単にする