[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;}

レンダリング:

次に、実験を見てください。

ステップ 1: flex:1; および flex:1 1 auto; 公式の定義によれば、デフォルト値は初期値であり、2 つの実装の効果は同じであるはずです。

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

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

WTF?間違っている！

心配しないで、F12 を押して、flex:1; が設定されているときに devtool ウィンドウで計算された値を見てください。 (この文は意味がありません。自動的に省略してください) it)

要約: 単一項目の初期値はデフォルトでは取得されないことがわかります (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.org へのリンクがあります。

最初のタイプ: flex:initial; は flex:0 1 auto; と同等です

.item に flex:initial; を設定します

計算された値

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

2 番目のメソッド: flex:auto; flex:1 1 auto;

.item に flex:auto を設定します

計算された値

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

3 番目のメソッド flex:none は flex:0 0 auto と同等です。

flex:none を .item に設定します

計算値

概要: これにより、弾性サブアイテムの弾性効果が完全に失われます。この効果は 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;

まだ計算値に flex の影が見つかりません

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

計算値には影しかありません

分析：这里给每个弹性子项设置了固定宽度（因为这水平轴就是主轴），因为没有 flex属性的伸展因子 flex-grow和收缩因子 flex-shrink的影响，每个弹性子项都“老老实实的”按照 justify-content: space-around的指令水平对齐了（嘴上说着不要“身体”还是挺老实的嘛，啧啧）。

好吧，只能承认， content是个无效的属性值。对！它并不是属性值。好大一个玩笑（轻点，别打脸）。它只是表示弹性子项的宽度/高度由内容决定，即被内容撑开。而这个撑开的宽度/高度则作为伸展因子和收缩因子的基数进行相应弹性变化的计算。

Part 3. 凭什么说被内容撑开的宽度/高度就是连体因子（舌头打结了）的计算基数？不服来辩！

第一步，先看不设置 flex属性时上面对照实验中上面一组的数据（记得“关了” width），从左至右：

可以看到第一个no1和第三个no3的宽度是相同的84.297，第二个是290.875。这里要注意因为 box-sizing初始值是 content-box，所以内容区宽就是 width的取值，边距边框都不用管。

第二步，设置一个伸展因子 flex:1 1 auto;这里必须设置 flex-basis:auto;因为缺省后就是 flex-basis:0%;了，相当于以撑开的宽度/高度作为的基数置零了。效果图就不上了，对应前面的 flex:auto;，下面是计算值

可以看到这次的第一个no1和第三个no3的宽度是126.813，第二个是333.391。然后让我们搬出伸展因子的计算公式：

flex-basis + flow-grow / sum( flow-grow ) * remain

这里的 flow-grow指的就是 flex-flow方向上的伸展因子的数值，而由于设置了 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，以免引起后面结果错误。

最后套入公式：

第二部中第一个和第三个弹性子项的宽：

84.2969 + ( 1 / 3 ) \* 127.5312 = 126.8073（这里跟126.813很接近，但是我找不出那里算漏了的，有指导的朋友麻烦告知，谢谢）

第二个弹性子项的宽：

290.875 + （1 / 3 ) \* 127.5312 = 333.3854（待查错）

这一部分先到这里吧。花了我好久时间，好晚了。

总结

flex的缺省值并非是单一属性的初始值，并且还有常用的简写属性值 initial、 auto和 none；当弹性子项没有设置固定宽度（对于水平的情况，也就是宽度本身是 auto的）时， flex-basis如果也是 auto，那么 flex-basis的使用值就是弹性子项的内容本身撑起来的宽度（对于水平的情况）

工具与环境

• 操作系统：window 7 ultimate 64bit

• chrome内核版本：45.0.2454.101

• 编辑器：Sublime Text 3

参考资料

• CSS Flexible Box Layout Module Level 1

• flex | CSS-Tricks

• 关于弹性长度计算的描述： https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths

唠叨

在查找资料过程中，发现一些不错的东西，分享加收藏一下。

• 不明觉厉的网站和文章： http://ptb2.me/

• CSS Flexbox试验场： http://vagor.cc/demo/flexbox-demo/index.html

• Flexbox-推陈出新： https://css-tricks.com/old-flexbox-and-new-flexbox/

先这样了，为了发完这文章熬夜了。熊猫君思密达。

对了代码可以去我的 Github上找，说完了。

再补一点信息，一定不要忘了标注的文档开篇说的：