FlexBox 標準および互換性のあるライティングチートシートを共有する-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-16 11:02:32

オリジナル

1245 人が閲覧しました

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