CSS フレキシブル ボックス モデルの深い理解 flex_html/css_WEB-ITnose

× 目次 [1] バージョンの変更 [2] 表示 [3] 基本概念 [4] フレキシブルコンテナ [5] フレキシブルプロジェクト

前の言葉

CSS3 では、新しいレイアウト モデル - フレックス レイアウトが導入されています。フレックスとはフレキシブルボックスの略で、一般にフレキシブルボックスモデルと呼ばれています。他の CSS3 プロパティとは異なり、フレックスボックスはプロパティではなく、複数の CSS3 プロパティを含むモジュールです。フレックス レイアウトは、さまざまなタイプの表示デバイスやさまざまなサイズの画面に適応するために、コンテナ内でアイテムをより効率的にレイアウトする方法を提供します

バージョンの変更

フレックスボックス レイアウトの構文仕様は、長年にわたって大幅に変更されました。 。 2007 年 7 月から、flex の最初のバージョンのワーキング ドラフトがリリースされ、2012 年 9 月までに、flex の最新バージョンが推奨候補になりました。 Flex は主に 3 つのバージョンを経ました

[1] 古いバージョンの display:box | inline-box

を追加する必要があります

display

要素をスケーラブルなコンテナに変えるには、display 属性を使用する必要があります。フレックス レイアウトを使用する要素はフレックス コンテナと呼ばれ、コンテナ内の子要素はフレックス アイテムと呼ばれます

[注] ブラウザは、フレックス コンテナ内の連続テキスト ブロックを直接匿名のスケーラブル プロジェクトにラップします

フレックス レイアウトを使用すると、要素は FFC (フレックス フォーマッティング コンテキスト) であり、FFC は通常のフローの一種です。フローティング フロー、位置決めフロー、およびその他の CSS 属性は、主に次の点で FFC に影響を与えます:

[1] float、clear、vertical-align 属性はスケーラブルなプロジェクトには影響しません

[2] 伸縮コンテナコンテンツのマージンは重なりません

[3] text-align 属性は、ブロックレベルのブロック コンテナにのみ適用できるため、スケーラブル コンテナには影響しません

[4] さらに、conlumns 属性には重なりません。スケーラブル コンテナへの影響

フレックスボックス モデルの 2 つのコンテナ、ブロックレベルのスケーラブル コンテナとインライン スケーラブル コンテナの違いは、ブロックとインライン ブロックの違いに似ています。一方は 1 行を占有し、もう一方は占有します。 not occupy one row

//弹性盒模型: 块级伸缩容器 | 内联伸缩容器//新版本display: flex | inline-flex;//混合版本display: flexbox | inline-flexbox;//旧版本display: box | inline-box;

基本コンセプト

スケーラブルコンテナにはデフォルトで2つの軸があります：水平主軸（main axis）と垂直交差軸（cross axis）です

[注意]主軸の方向は必ずしも水平である必要はなく、主に justify-content 属性に依存します

主軸の開始点はメイン開始点と呼ばれ、主軸の終了点はメイン終了点と呼ばれます。横軸をクロススタート、横軸の終点をクロスエンドと呼びます。デフォルトでは、伸縮アイテムは主軸に沿って配置されます。単一のテレスコピック プロジェクトが占める主軸のスペースをメイン サイズといい、側軸のスペースをクロス サイズといいます。 [注] テレスコピック プロジェクトのメイン サイズとクロス サイズは、主に幅または高さによって決まります。フレックスコンテナ

Flex-direction

フレックスフローラップ

//伸缩流方向: 水平方向 | 反向水平 | 垂直方向 | 反向垂直//新版本同混合版本flex-direction: row[默认] | row-reverse | column | column-reverse//旧版本box-orient: horizontal(水平) |vertical(垂直) |inline-axis[默认](内联轴方向) |block-axis(块级轴方向)box-direction: normal(正常) | reverse(反向) 

//伸缩行换行:不换行 | 换行 | 反转换行//新版本同混合版本flex-wrap: nowrap[默认] | wrap | wrap-reverse//旧版本，没有浏览器支持box-lines属性，所以在旧版本中无法实现伸缩项目换行显示box-lines: single[默认] | multiple | N/A

//伸缩流: 伸缩流方向 | 伸缩行换行//新版本同混合版本flex-flow: <flex-direction> | <flex-wrap> [默认值] flex-flow: row nowrap//旧版本无对应属性

//主轴对齐方式: 左对齐 | 居中对齐 | 右对齐 | 两端对齐 | 扩散对齐//新版本justify-content: flex-start[默认] | center | flex-pack | flex-end | space-around//混合版本flex-pack: start[默认] | center | end | justify | distribute//旧版本box-pack: start[默认] | center | end | justify | N/A

//侧轴对齐方式: 顶边对齐 | 中间对齐 | 底部对齐 | 基线对齐 | 伸缩项目拉伸填充整个伸缩容器//新版本align-items: flex-start | center | flex-end | baseline | stretch[默认]//混合版本flex-align: start | center | end | baseline | stretch[默认]//旧版本box-align: start | center | end | baseline | stretch[默认]

　　[注意]如果伸缩项目有width/height属性将优先于侧轴对齐为拉伸的方式

　　[注意]侧轴对齐方式与direction、writing-mode、flex-flow都有关

【6】堆栈伸缩行:指定多个伸缩项目行在侧轴的对齐方式

//侧轴对齐方式: 顶边对齐 | 中间对齐 | 底部对齐 | 两端对齐 | 扩散对齐 | 伸缩项目拉伸填充整个伸缩容器//新版本align-content: flex-start | center | flex-end | space-between | space-around | stretch[默认]//混合版本flex-line-pack: start | center | end | justify | distribute | stretch[默认]//旧版本无对应属性

　　[注意]该属性只有在flex-wrap:wrap | wrap-reverse;且伸缩项目存在多行时才生效

　　[注意]堆栈伸缩行与direction、writing-mode、flex-flow都有关

伸缩项目

　　一个伸缩项目就是伸缩容器的一个子元素。伸缩容器中的文本也被视为一个伸缩项目。以下6个属性设置在伸缩项目上。

　　自身侧轴对齐方式 align-self

　　伸缩基准值 flex-basis

　　扩展比率 flex-grow

　　收缩比率 flex-shrink

　　伸缩性 flex

　　显示顺序 order

【1】自身侧轴对齐方式:单个伸缩项目在侧轴的对齐方式，该属性可以覆盖伸缩容器的侧轴对齐方式

　　[注意]对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同

//侧轴对齐方式: 自动 | 顶边对齐 | 中间对齐 | 底部对齐 | 基线对齐 | 伸缩项目拉伸填充整个伸缩容器//新版本align-self: auto[默认] | flex-start | center | flex-end | baseline | stretch//混合版本flex-item-align: auto[默认] | start | center | end | baseline | stretch//旧版本无对应属性

　　[注意]如果align-self的值为auto，则其计算值为伸缩项目的伸缩容器的align-items值

　　[注意]如果伸缩项目的任一个侧轴上的外边距为auto，则该伸缩项目在伸缩容器的剩余空间内居中对齐，且align-self没有效果。

【2】伸缩基准值: 伸缩项目在主轴方向上的初始大小

//新版本flex-basis: <length> | auto[默认]//混合版本positive-flex: <number>[默认为1]//旧版本无对应属性

　　如果flex-basis的值为0，表示伸缩项目在主轴方向上的初始大小为0，则分配所有空间；如果flex-basis的值为auto，表示伸缩项目在主轴方向上的初始大小为其本身的大小，则分配剩余空间

　　[注意]flex-basis的值可以是一个数字后面跟着px、em等单位，也可以是一个百分数，相对于其父伸缩容器的主轴长度

【3】扩展比率: 当伸缩容器的额外空间为正值时，此伸缩项目相对伸缩容器里其他伸缩项目能扩展的空间比例

//新版本flex-grow: <number>[默认为0]//混合版本positive-flex: <number>[默认为0]//旧版本无对应属性

　　若flex-grow的值为0表示即使存在剩余空间也不放大；若所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)；若一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

【4】收缩比率:当伸缩容器的额外空间为负值时，此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例

//新版本flex-shrink: <number>[默认为1]//混合版本negative-flex: <number>[默认为0]//旧版本无对应属性

　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

　　[注意]伸缩基准值、扩展比率和收缩比率都可以为小数，但不能为负数

【5】伸缩性:是扩展比率、收缩比率和伸缩基准值的缩写

    flex: none => flex: 0 0 auto;    flex: auto => flex: 1 1 auto;    flex: 0 => flex: 0 1 0%;    flex: 1 => flex: 1 1 0%;    flex: 0 auto => flex: 0 1 auto;    flex: 0 1 => flex: 0 1 0%;

　　[注意]当flex为关键字none或存在auto时，flex-basis为auto；若flex只有数字值，则flex-basis为0%；

//新版本flex: none[默认] | [<flex-grow> <flex-shrink>? || <flex-basis>]//混合版本flex: none[默认] | [<pos-flex> <neg-flex>? || <preferred-size>]//旧版本box-flex: <number>[默认为0]

【6】显示顺序: 定义伸缩项目的排列顺序，数值越小，排列越靠前

　　[注意]伸缩容器中的伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序(HTML文档的DOM结构中的先后顺序)

//新版本order: <number>[默认为0]//混合版本flex-order: <number>[默认为0]//旧版本box-ordinal-group: <integer>[默认为1]

　　[注意]order的属性值可以是负数，但不能是小数