css_html/css_WEB-ITnoseのbox属性について

CSS box-flex プロパティ、そしてフレキシブル ボックス モデルの紹介

この記事は 2010 年 12 月 19 日、日曜日、17:10 に公開されたもので、css 関連に分類されます。 今日 8 回、187777 回読まれました

http://www.zhangxinxu.com からの zhangxinxu による記事
記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=1338

1. 軽いオープニング

昨日、仕事をしたくない時間を利用して、24ways の記事で新しい CSS プロパティを見つけました。タイトルのボックスフレックスは初めて見たので、ラバなのか馬なのか分からず、よく分からず検索してしまいました。そしてそれを見つけたときは衝撃を受けました。属性そのものではなく、* としてのこの属性が CSS3 の新しいボックス モデル (フレキシブル ボックス モデル) を理解するきっかけとなったのです。私のような流動的なレイアウトのコントローラーにとって、このボックスモデルの登場は、7つのオープンバーで麻雀をするようなもので、非常に興奮しています。海外では、フレキシブルボックスモデルは昨年すでに言及され、研究され、適用され始めました。しかし、この概念を初めて聞いたので、うっかり忘れてしまいました。

この記事の内容は、先ほどの川を下る方法とは別に、box-flex 属性をエントリポイントとして直接使用し、ベースキャンプに直行してナラティブを展開します。

2014-11-30 追加: この記事は古いため、参照のみを目的としています。

2. Box-flex 属性 (ハーモニーバージョン)

Youdao デスクトップ辞書によると、「flex」という単語は中国語で「縮小」を意味します。しかし、この性質の実際の効果を見ると、「収縮」という言葉でどう説明しても無理があるように思えます。したがって、ここでは、文字通りの意味は別として、「ボックスフレックス」を「ハウスディストリビューション」と理解することができます。ボックスとは「箱」という意味で、時価が莫大な「家」と理解できますが、「フレックス」は兄弟間での「家の割り当て」を指します。

もっと実践的な例を挙げると、マリンおじさんは生涯を通じて倹約と倹約を続け、ついに上海郊外に150平方メートルの商業用住宅を購入しました。その後、マリンおじさんは退職後に故郷に戻りたいと考え、その家を3人の息子に割り当てることにしました。さて、ここで言う「ハウス」は「box-flex」の「box」であり、「distribution」は「box-flex」の「flex」です。 「box-flex」と呼ばれるもので、box-flex属性の値によって、どのように分配するのか、どのような比率で分配するのかが決まります。さて、例を続けますと、マリンおじさんの 3 人の息子の名前は、ダー・マー、ゾン・マー、シャオ・マーです。そのうちのダー・マーには長年結婚しており、たくさんの双子の娘がおり、ゾンは家族をサポートする多くの人々に恵まれています。馬馬と小馬は優秀な独身者です。そのため、マレーシアはさらに多くの住宅を割り当てるよう要求し、最終的に家族が交渉して次のような配分結果を導き出した。

#大马 { 房子-分配: 2; }#中马 { 房子-分配: 1; }#小马 { 房子-分配: 1; }

上記の配分はわかりやすいと思う。ハウスは合計4つの部分に分かれており、家族を持つ大きな馬は2つ、国のためにゴムを節約するために働いている中程度の馬と小さな馬はそれぞれ1つずつもらえるので、数値換算すると次のようになります。 :
大きな馬 = 150 * (2 / (2+1+1)) = 75 (平方メートル)
中型の馬 = 150 * (1 / (2+1+1)) = 37.5 (平方メートル)メートル);
Small Horse = 150 * (1 / (2+1+1)) = 37.5 (平方メートル);

CSS に変換すると、次のようになります:

#first_boy { box-flex: 2; }#second_boy { box-flex: 1; }#three_boy { box-flex: 1; }

わぁ、ボックス - flex の意味と機能はすぐに理解できます。親タグの幅 (または高さ) スペースを比例的に割り当てるために使用されます。

box-flex の値が 1 以上の整数の場合に機能します。ただし、box-flex 属性だけでは、その親要素の意味にも依存するため、サブ要素間のスペース割り当てを実現するには十分ではありません。いわゆる、私の父はリー・ガンです。彼は人にぶつかるととても傲慢です。私の父がガンではないのが嫌いです。彼は人にぶつかるとパニックになります。父親が「これで、この家を好きなように割り当ててよい」と言った場合にのみ、彼の子供たちはそれを割り当てることができます。

したがって、親要素にも必要な宣言を追加する必要があります。このステートメントは次のとおりです:

#father { display: box; }

次のようにもできるようです:

#father { display: inline-box; }

このステートメントは次のようにも言えます: 子供たち、今私はこの家を自由に割り当てることができます。固定資産以外の財産は、自分たちで交渉して割り当てます。
display: box; の宣言は、実際にはフレキシブル ボックス モデルの宣言です。この宣言に基づく子要素の動作とパフォーマンスは、CSS2 の従来のボックス モデルのパフォーマンスとは大きく異なります。

結局のところ、これは CSS3 に属しており、現時点では Firefox/Chrome/Safari ブラウザーのみがフレキシブル ボックス モデルをサポートしており (IE9 では不明、Opera ではまだ)、使用する場合は、プライベートプレフィックス。 -moz-、-webkit- などと同様です。

CSS の例
次に、マリンで家を分割する上記の例を CSS でインスタンス化し、Web ページ上でどのように動作するかを確認します。 //zxx: 斬新なショットがあります。映画のように、

メインの CSS コードは次のとおりです:

.test_box {    display: -moz-box;     display: -webkit-box;     display: box;         ... }.list {   ...}.list_one {    -moz-box-flex: 1;     -webkit-box-flex: 1;     box-flex: 1;}.list_two{    -moz-box-flex: 2;     -webkit-box-flex: 2;     box-flex: 2;}

HTML コードは次のとおりです:

<div class="test_box">    <div class="list list_two">1</div>    <div class="list list_one">2</div>    <div class="list list_one">3</div></div>

結果は次のサムネイルです:

上の写真からわかるように、年長の馬には確かにハウス スペースの 2 シェアが割り当てられ、真ん中の馬と小さな馬にはハウス スペースの 1 シェアが均等に割り当てられます。

ここをクリックしてください: box-flex エラスティック レイアウト テスト デモ

三、CSS box-flex属性（不和谐版）

继续上面马林大叔分房的例子。原本兄弟三人和和睦睦是一点问题都没有的，房子怎么分也基本都定下来了。然而，突然，事情起了波澜。老三小马突然有了个彪悍的女朋友，叫阿凤。小马本人对分配房子的大小是觉得无所谓的，即使两个人住，近40平米的屋子也足够了，何必为了这点事情伤了兄弟们间的和气。然而，小马的女友阿凤却是个吃不了亏的人，说什么也要争口气，于是，找来大马中马，强烈要求要加大他们房子的分配面积。

在大马，中马看来，阿凤还属于外来人，凭什么对他们兄弟的房子指手划脚，于是，没得妥协，于是，争执不断，于是，愈演愈烈，于是，不可开交。于是，有天，阿凤实在憋不住了，在厨房做菜的时候突然拿着菜刀跑出来，大声咆哮：“不管怎样，反正我家小马至少要50平米的房子，其余的怎么分是你们的事情，我不管，这是我的底线了，再低就没得商量！！”大马等被这架势吓住了，最终还是妥协了：小马就50平米（即使以后房子扩建还是50平米），剩下的面积大马，中马2:1比例再分配。于是就有：

#大马 { 房子-分配: 2; }#中马 { 房子-分配: 1; }#小马 { 房子-分配: 50m2; }

改编成CSS剧本就是：

#first_boy { box-flex: 2; }#second_boy { box-flex: 1; }#three_boy { width: 50px; }

还是不难理解，当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配。
于是，此时，大马的房子大小是：(150 – 50) * (2 / (1 + 2)) = 66.7平米，中马分配房子大小是：(150 – 50) * (1 / (1 + 2)) = 33.3平米。

还是类似上面的demo，看看含有定宽元素的子元素是如何表现的。

新增CSS样式如下：

.list_w300 { width: 300px; }

HTML代码如下：

<div class="test_box">    <div class="list list_two">1</div>    <div class="list list_one">2</div>    <div class="list list_w300">3</div></div>

结果如下缩略图：

老三分得300像素的宽度，剩下的500像素宽度老大和老二2:1比例分配。

您可以狠狠地点击这里：含定宽元素弹性布局demo

然而，事情还没有结束。兄弟几个相处了一段时间后发现，偌大的屋子如果全部都是私有的话，会有诸多生活上的不便。所以，需要腾出些公共空间，给屋子透个气。咋办呢，老三小马的女友阿凤死活不妥协，没有办法，老马和中马只能牺牲自己的住所面积作为公共空间了。

反应到CSS上，大致就是增加了margin间距，如下HTML：

<div class="test_box">    <div class="list list_two">1</div>    <div class="list list_one" style="margin:0 30px;">2</div>    <div class="list list_w300">3</div></div>

结果如下缩略图：

老大，老二的空间同时被压榨了，老大还好，原本比例高。只是可怜了二当家的，地方越来越小。不过，老二的隐忍换来了和睦，所做的牺牲没有白费。

四、爸爸其实很厉害，的说~

语言小知识：“厉害”用日语说的话，动漫里面经常用的比较文雅的就是“すごい”，现在年轻人常用的就是“スゲ”，还有一种说法“よくできるね”是一种称赞的说法，语气比较柔和。

弹性盒子模型下的爸爸（父标签）其实是很有货的，男人嘛，就应该这样，够沉稳够内涵。
爸爸肚子中的货有：box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

我专门做了个demo页面，方便您查看各个值的行为与表现。您可以狠狠地点击这里：box-orient值作用测试页面

切换demo页面左边的单选选项卡（如果您的浏览器为Firefox/Chrome/Safari），就可以看到不同的box-orient属性值的行为表现了。//zxx:对比可以发现，Firefox下的display:box会收缩外框（有点display:inline-block的感觉），而Chrome则没有收缩。

box-direction
box-direction是用来确定子元素的排列顺序，可选值有：

normal | reverse | inherit

其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。

例如我们将此属性应用在我们一开始的分配房子的demo上的话，最后的显示就会如下缩略图——顺序反过来的：

相关CSS代码如下：

.test_box {    display: -moz-box;     display: -webkit-box;     display: box;        -moz-box-direction:reverse;    -webkit-box-direction:reverse;    box-direction:reverse;        ... }

您可以狠狠地点击这里：列表顺序反转显示demo

box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”，这跟Adobe的软件中的一些“对齐”是一致的，例如化妆大师photoshop中的图层-对齐：

其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐；而剩下的box-pack就是水平方向的了。

box的可选参数有：

start | end | center | baseline | stretch

其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，//zxx:以后等高布局不用愁了。start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。

为了直观的知道各个值的效果，我做了个可实时查看效果的demo，您可以狠狠地点击这里：css box-align各值效果demo

点击demo左边的单选按钮组，即可查看各个属性值的效果。

例如，选中”center”这个单选按钮，结果右侧的显示如下面的截图：

其他各个属性值的效果您可以自己点击查看（非IE浏览器），这里就不一一展示效果截图了。

box-pack
box-pack决定了父标签水平遗留空间的使用，其可选值有：

start | end | center | justify

就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。

其中”start”是box-pack属性的默认值，justify表示两端对齐。

为了方便直观的查看各个属性值的效果，我制作了与上面类似风格的demo，您可以狠狠地点击这里：box-pack属性值效果demo

下为选中end的界面截图缩略图：

貌似发现在Firefox浏览器下，justify是没有反应的，可能还未支持。Chrome浏览器表现良好。

box-lines
box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：

single | multiple

其中single是默认值，表示死活不换行，如下图所示：

设置box-lines:multiple后，就多行显示了。不过我自己测试了下，貌似现在无论是Firefox浏览器还是Chrome都不认识box-lines:multiple属性，是暂不支持呢，还是什么什么？

您可以狠狠地点击这里：看不到换行效果的demo

五、两个遗漏的属性

子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex-group的作用不详，貌似目前浏览器也不支持；box-ordinal-group的作用是拉帮结派。还是上面马林大叔分房子的例子。小马女友阿凤又不消停，眼瞅着大马的房子面积比自己大好多，心里不平衡，于是，就去拉拢中马，一起打大马房子的主意。这个“拉拢”就是这里的box-ordinal-group，拉拢的组织团伙是有一个数字级别的，决定了你这个组织的位置。

数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… 例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。例如下面这个例子：
HTML代码如下：

<div class="test_box">    <div class="list list_two">1</div>    <div class="list list_one">2</div>    <div class="list list_one">3</div></div>

相关CSS如下：

.list_one {    ...    -moz-box-ordinal-group: 1;     -webkit-box-ordinal-group: 1;     box-ordinal-group: 1;}.list_two{    ...    -moz-box-ordinal-group: 2;     -webkit-box-ordinal-group: 2;     box-ordinal-group: 2;}

结果后面两个class为”list_one”的元素跑到前面去了。如下图所示：

您可以狠狠地点击这里：box-ordinal-group分组改序demo

六、实际点的应用

如果您现在浏览器地址栏中的地址中含有”www.zhangxinxu.com”字样，并且浏览器为较新的Firefox/Chrome/Safari浏览器，那么您就可以在本页面上找到我做的应用。

咔咔，我就不卖卖关子了，我改变了相关文章某一处的显示顺序，就是随机文章。

但是在本文所在的页面上，随机文章第一个显示了（由于赞不支持换行，故垂直显示了）。

相关CSS代码如下：

.similarity ul{display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:vertical; -webkit-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical; }.similarity ul li{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}.similarity ul li:last-child{-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1; }