FlexBox 標準および互換性のあるライティング チート シートを共有する

FlexBox 標準書き込み:

サポートされているブラウザ: IE11、Chrome29+、FireFox 20+、Safari plus prefix -webkit-

概要:

12 属性;

コンテナには 6 つまたは 5 つの単一属性があり、それぞれ 方向、行、水平配置、垂直配置、空白分布、 と省略された属性 方向、行 を定義します。コンテナ内の要素の 6、5 つの単一属性。それぞれ順序、伸縮、縮小、初期サイズ、配置、

、および要素の省略された属性説明

要素サイズ

コンテナ: flex-方向flex-wrap: default: : コンテナ内の要素の分布align-content:: flex-end | |ベースライン | ストレッチ align-items の値をオーバーライドして、垂直方向の独自の分布を定義します

display: flex | inline-flex;説明

: 行 - 反転 | column-reverseコンテナ内の要素の配置方向

nowrap | Wrap-reverse

1行の要素または複数行表示

flex-flow

:

上記の 2 つの属性の略語if

y-content

flex-start | space-around

: flex-start | flex-end |

垂直方向では、

flex-start | center- between | space-around

コンテナ内の余分な空白の分布

コンテナアイテム:

0align-self

: auto |

flex-grow:

container container inflex-shrink

の容器の範囲内：＆lt; number＆gt;コンテナ

flex-basis: auto

初期化時のコンテナ内の要素のサイズ

フレックス:

*上記の <数値> は負の値をサポートしません。 *各属性の最初の値はデフォルト値です。

*青は複数の属性の省略モードです。

接頭辞 -ms- を追加します。

display:-ms-flexbox | -ms-inline-flexbox;

standard

(

オレンジはアイテム属性)

: :

*IE10より前では推奨されません。display:table;

を試すことができます

Chrome、FireFox旧バージョンのサポートについて:

FireFox: -webkit- を -moz- に置き換えると、次のようになります。

-ms-flex-direction : 行 | 列反転 | 列反転	-ms-flex-wrap : なし | ラップリバース
フレックスラップ	はサポートされていません
フレックスフロー -ms -フレックスパック	開始 | 終了 | 中央揃え
justify-content	-ms-flex-align
ストレッチ | 開始 | 終了 | ベースライン -ms-flex-line-pack	開始 | 終了 |センター | ベースライン	align-content
-ms-flex-order :	注文
-ms-flex-item-align : ストレッチ |開始 |終わり |中央 |ベースライン	align-self
-ms-flex :  <ネガティブフレックス>  ||なし	flex : 0 0 auto

標準-webkit-box-orient サポートされていませんストレッチ | フレックスエンドalign-items 1

( オレンジ色は項目属性です)	-webkit-box-direction: normal | reverse
: 水平 | 垂直 フレックス方向 はサポートされていません	フレックスラップ
サポートされていません	flex- flow
-webkit-box-pack : flex-start スペース-アラウンド |	justify-content
-webkit-box-align:
	-webkit-box-ordinal-group:
order	- ウェブキット-box-flex :
	flex-grow
-webkit-flex-shrink: 0	flex-shrink
-webkit-flex-basis: auto (なし-moz-)	flex-basis
-webkit-box:    <1 0 auto>	flex
はサポートしていません	align-self

以上がFlexBox 標準および互換性のあるライティング チート シートを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。