[CSS Fun] flex のデフォルトの auto と 0_html/css_WEB-ITnose の違いは何ですか

質問

最近質問に遭遇しました: flex:1; と flex:1 1 0; は同等です。 W3C 属性値の構文に関する私のこれまでの理解によれば、flex:1; は flex:1 1 auto; のデフォルトの記述方法であるはずであり、flex-shrink と flex-basis の残りの 2 つの落とし穴はそれぞれ 1 と auto に対応するはずです。そうそう、短縮属性にはデフォルト値が対応する単一属性の初期値にリセットされるという特徴がありました（詳しくは『CSS 決定版 第3版』のP130を参照してください）。ここでの flex-shrink と flex-basis は、デフォルトの単一属性です。ただし、従来のテスト (柔軟な項目にコンテンツが入力されていない) では、flex:1; と flex:1 1 0; の違いを明確に検出できません。そこで問題は、どうすればその違いを感じることができるのかということです。

試してみる

まず、何をしたいかを決めますか? flex のデフォルトの auto と 0 の違いを実験を通して学びます。
次に、コードを入力します (ソース コードを表示するには、私の Github にアクセスして shorthand_flex_test という名前の 2 つのファイルを見つけることができます):

.contain {    background: #aec;    height: 100px;    display: flex;    justify-content: space-around;/*设置主轴方向均分对齐*/    flex-flow: row wrap;/*设置正常水平排列*/    align-items: stretch;/*设置所有弹性子项拉伸到弹性容器高度*/}.item {    border: 3px solid rgba(0,0,0,.2);    padding: 10px;    background: #eac;    color: #fff;    font-size: 2em;    font-weight: bold;    text-align: center;}

レンダリング:

次に、実験を見てみましょう。
最初のステップ、flex:1; と flex:1 1 auto; は、公式の定義によれば、デフォルト値が初期値であり、2 つの実装の効果は同じであるはずです。
flex:1; を .item に設定すると、レンダリングは次のようになります:

flex:1 1 auto; を .item に設定すると、レンダリングは次のようになります:

WTF?間違っている！
心配しないで、F12 を押して、flex:1; が設定されているときの devtool ウィンドウの計算値を見てください。

次に、flex:1 1 auto; が設定されているときの計算値を見てください。はナンセンスなので自動的に省略してください)

概要: 単一項目の初期値はデフォルトでは取得されないことがわかります (flex-shrink:1 および flex-basis:auto) 。では、この 0% は 0 に相当するのでしょうか?
2 番目のステップは、今回は flex:1 1 0 を設定することです。

図はまだこのようなものですが、計算された値は次のように異なります

概要: 実際、パーセンテージの計算値は親コンテナの幅に基づいて計算され、長さの値 0 は追加の計算なしで直接取得されますが、最終的な計算値 0% と0はどちらも0pxです。

答えの結果

これで最初の質問は答えられました。flex:1 と flex:1 1 0; の視覚効果と最終的な計算値は同じです。計算プロセスが異なります。

拡張実験

パート 1。実験が完了したので、flex のいくつかの一般的な値を記述するいくつかの方法を学習できます。ここに、drafts.c​​sswg へのリンクがあります。組織。

最初の flex:initial; は flex:0 1 auto; と同等であり、これは flex:0 auto;
Set flex:initial;

と同等です。 item 計算値

概要: 自動適応により得られた 10% を示します。この属性宣言の効果は、余分なスペースがある場合は弾性子が伸びるのを防ぎ、スペースが不十分な場合は最小の幅/高さまで縮小することです (特定の計算ベースは主軸の方向によって決まります)。ここでの幅/高さには、柔軟な子項目内のテキスト コンテンツが含まれる場合があります。コンテンツの有無により、auto 属性が別の flex-basis プロパティの属性と異なります。これについては後で説明します。また、この属性値に設定すると、フレキシブルコンテナに設定されている主軸方向の整列効果とmargin:auto;のセンタリング効果が有効になります。

2 番目のタイプ、flex:auto; flex:1 1 auto と同等;
.item に flex:auto を設定;

値を計算

概要: これにより、余分なスペースがある場合は伸縮性のある子が伸び、十分なスペースがない場合は縮みます。この時点で、Elastic Child は完全な Elastic 効果を持ち、複数の Elastic Child が異なる flex 属性宣言を設定すると、余分なスペースは auto 属性値が設定された Elastic Child によって「吸収」されます。

3 番目のメソッド flex:none は、flex:0 0 auto;
.item に flex:none を設定します

計算値

:これにより、伸縮性のある子の伸縮性の効果が完全に失われます。この効果は auto 属性値の設定に似ていますが、コンテンツがエラスティック コンテナーからオーバーフローすると、ここのエラスティック アイテムは縮小されません。

パート 2. 続けて、前述のコンテンツがどうなったかを確認します。

最初のステップは、初期値と同等の値と比較することです。最初のものは投稿しません。Part1 の最初のタイプにあります。 flex:0 1 の内容を直接見る;

計算値

分析: 何が起こっているのか? ！ flex の計算値はどうなるでしょうか?前の none にはすべて計算値が含まれていますが、ここにはそれらの値がありません。ちょっと待ってください。コンテンツを設定するとき、最初の 2 つの値は無視できることが理解できましたか?

2 番目のステップは、flex:content;

計算値

分析: 予想通り、それらはまったく同じです。しかし、なぜですか?コンテンツは具体的に何をするのでしょうか?
標準では、この属性値を設定すると、伸縮性のある子アイテムの幅/高さがコンテンツによって直接決定されると規定されています。おお、不思議ではありませんが、上記のグループの伸縮性のあるサブアイテムがコンテンツによって引き伸ばされていることが比較効果で明確に示されています。
でも、これは flex 属性を設定しないのと同じではありませんか!十分に読んでいない場合は、私をいじめないでください。安全のため、「究極の動き」のみを使用できます:

    -webkit-flex: content;    -moz-flex: content;    -ms-flex: content;    -o-flex: content;    flex: content;

計算値にはまだフレックスの痕跡がありません

3 番目のステップは、2 番目のステップの「究極の一手」に基づいて width:100px を追加することです。

計算された値には影だけがありません

分析: ここでは flex 属性の伸縮率 flex-grow と収縮率 flex-shrink の影響を受けないため、各伸縮アイテムに固定幅を設定しています(横軸が主軸のため)。 item is "honest" "Really" はコマンド justify-content: space-around に従って水平に配置されます ("body" が必要ないというのは非常に正直です、チクチク)。
わかりました。コンテンツが無効な属性値であることを認めることしかできません。右！属性値ではありません。なんて大げさな冗談でしょう（顔に平手打ちしないでください）。これは、弾性子の幅/高さがコンテンツによって決定される、つまりコンテンツによって引き伸ばされることを意味します。拡張された幅/高さは、対応する弾性変化を計算するための拡張率と収縮率の基礎として使用されます。

パート 3. コンテンツによって引き伸ばされる幅/高さが結合係数 (タンタイ) の計算の基礎になると言えるのはなぜですか?納得できないなら、議論しに来てください！

最初のステップは、フレックス属性を設定するときにコントロール実験で上記のデータ セットを左から右に確認することです (幅を「オフ」にすることを忘れないでください)。



最初のno1と3番目のno3の幅は同じ84.297で、2番目の幅は290.875であることがわかります。ここで注意すべき点は、box-sizing の初期値が content-box であるため、コンテンツ領域の幅は width の値となり、余白や境界線は関係ありません。
2 番目のステップはストレッチ係数を設定することです flex:1 1 auto; デフォルトは flex-basis:0%; なので、これはストレッチされた幅/高さを使用するのと同じです。 as ベースはゼロに設定されます。レンダリングが上がっていないので、先ほどの flex:auto; に対応して、以下が計算値です



今回の最初の no1 と 3 番目の no3 の幅が126.813 、2 番目は 333.391 です。次に、ストレッチ係数の計算式を外してみましょう: flex-basis + flow-grow / sum( flow-grow ) * main
ここでの flow-grow は、次のことを指します。 to flex - 流れ方向のストレッチ係数の値、および flex-basis:auto が設定されているため、スピンドル ベース flex-basis の計算値は最初のステップ 84.297 のデータである必要があります。 290.875 および 84.297; remain は、コンテナーの合計幅から最初のステップのすべての幅の合計を引いた値です:
665 - (84.2969 + 290.875 + 84.2969) - (10 + 3)*2* 3 = 127.5312
ここではフレキシブル コンテナ内の面積が計算されるため、パディングとボーダーの両方を追加する必要があります。また、以前にボックス モデルに表示されていた 84.297 は、計算された値リストの正確な値ではありません。問題の発生を避けるために、一番下の値は 84.2969 です。その後の結果は間違っています。

最後に式を挿入します:
2 番目の部分の最初と 3 番目の伸縮性アイテムの幅:
84.2969 + ( 1 / 3 ) * 127.5312 = 126.8073 (これは 126.813 と非常によく似ています)近くにありますが、どこを見逃したのかわかりません。指導してくれる友人、教えてください、ありがとう)
2 番目の弾性サブアイテムの幅:
290.875 + (1 / 3) * 127.5312 = 333.3854 (エラーチェック用)
まずここで止めましょう。かなり時間がかかってしまい、すっかり遅くなってしまった。

概要

flex のデフォルト値は、単一の属性の初期値ではありません。また、弾性子が固定幅に設定されていません (水平方向の場合 (つまり、幅自体が自動である)、flex-basis も auto である場合、flex-basis の使用値は、エラスティック項目のコンテンツによってサポートされる幅になります)それ自体 (水平方向の場合)

ツールと環境

オペレーティング システム: window 7 Ultimate 64 ビット
Chrome カーネル バージョン: 45.0.2454.101
エディタ: Sublime Text 3

参考資料

CSS フレキシブル ボックス レイアウト モジュール レベル 1
flex CSS-Tricks
弾性長さ計算の説明: https://drafts.c​​sswg.org/css-flexbox/# solve-flexible-lengths

しつこい

情報を検索する過程で、いくつか良いものを見つけました。共有してコレクションに追加してください。
不明な Web サイトと記事: http://ptb2.me/
CSS Flexbox テスト場: http://vagor.cc/demo/flexbox-demo/index.html
Flexbox-innovation : https: //css-tricks.com/old-flexbox-and-new-flexbox/
今回はここまでです。この記事の投稿を終えるために夜更かししてしまいました。パンダジュンスミダ。
ちなみに、コードは私の Github にあります。
もう少し情報を追加すると、マークされた文書の冒頭に記載されていることを忘れないでください:

推奨候補としての出版は、W3C メンバーによる承認を意味するものではありません。は草案文書であり、いつでも他の文書によって更新、置き換え、または廃止される可能性があります。この文書を進行中の作業以外のものとして引用することは不適切です。[1]