Foundation-flex-grid-sass-reference

Foundation-Flex Grid SASSリファレンス

説明

SASS（Syntactically Awesome Stylesheet）はCSSプリプロセッサーであり、CSSの繰り返しを減らし、時間を節約します。

ミックスイン

最終的なCSS出力は、mixinを使用して構築されます。 ミックスインを使用して、これらのコンポーネントから独自のクラス構造を構築できます。 以下は、最終的なCSS出力を構築するために使用されるミックスインです。

フレックスグリッド列

このミックスインを使用して、フレックスグリッド行のコンテナが作成されます。

@include flex-grid-row($behavior, $width, $columns, $base) { }

Sr.No.	Name & Description	Type	Default Value
1	$behavior デフォルトのグリッドスタイルが変更されます。	Keyword or List	null
2	$width 行の最大幅。	Number	$grid-row-width
3	$columns この行の列数を設定します。	Keyword or List	null
4	$base 重複した出力を作成するため、同じ要素でmixinを2回呼び出すのに便利です。	Boolean	true

フレックスグリッドコラム

フレックスグリッド列は、ミックスインを使用して作成されます。 親フレックス行でunstackクラスを使用すると、列をコンテナーの幅いっぱいに引き伸ばすことができます。

@include flex-grid-column($columns, $gutter);

Sr.No.	Name & Description	Type	Default Value
1	$columns 使用可能な値については、_flex-grid-column（）_関数が参照されます。	Mixed	Null
2	$gutter 列間にスペースを作成する	Number	$grid-column-gutter

フレックスグリッドオーダー

フレックスグリッド列のソースが変更されます。 最小の列番号が最初にレイアウトに表示されます。

@include flex-grid-order($order);

Sr.No.	Name & Description	Type	Default Value
1	$order 注文番号を適用します。	Number	0

関数

以下は、フレックスグリッドの機能です-

フレックスグリッドコラム

_flex_プロパティは、flex gird列に対して計算されます。 同じ値は、次のパラメータと一緒に基本的な_grid-column（）_関数として受け入れられます-

• null -列を完全なスペースに展開します。
• shrink -列を縮小します。

flex-grid-column($columns)

Sr.No.	Name & Description	Type	Default Value
1	$columns 特定の列幅を設定します。	Mixed	null