designFlonCSSv1.0.1

Utilities

Gaps

/path/to/floncss/trumps/gaps/gaps.css

ClassPropertiesDescription
gap
gap--column-gap: var(--gap-base);横方向の gap。--gap-base に定義した数値が適用されます。
gap:2xl--column-gap: var(--gap-2xl);横方向の gap。--gap-2xl に定義した数値が適用されます。
gap:xl--column-gap: var(--gap-xl);横方向の gap。--gap-xl に定義した数値が適用されます。
gap:lg--column-gap: var(--gap-lg);横方向の gap。--gap-lg に定義した数値が適用されます。
gap:md--column-gap: var(--gap-md);横方向の gap。--gap-md に定義した数値が適用されます。
gap:sm--column-gap: var(--gap-sm);横方向の gap。--gap-sm に定義した数値が適用されます。
gap:xs--column-gap: var(--gap-xs);横方向の gap。--gap-xs に定義した数値が適用されます。
gap:2xs--column-gap: var(--gap-2xs);横方向の gap。--gap-2xs に定義した数値が適用されます。
row gap
row-gap--column-gap: var(--gap-base);縦方向の gap。--gap-base に定義した数値が適用されます。
row-gap:2xl--row-gap: var(--gap-2xl);縦方向の gap。--gap-2xl に定義した数値が適用されます。
row-gap:xl--row-gap: var(--gap-xl);縦方向の gap。--gap-xl に定義した数値が適用されます。
row-gap:lg--row-gap: var(--gap-lg);縦方向の gap。--gap-lg に定義した数値が適用されます。
row-gap:md--row-gap: var(--gap-md);縦方向の gap。--gap-md に定義した数値が適用されます。
row-gap:sm--row-gap: var(--gap-sm);縦方向の gap。--gap-sm に定義した数値が適用されます。
row-gap:xs--row-gap: var(--gap-xs);縦方向の gap。--gap-xs に定義した数値が適用されます。
row-gap:2xs--row-gap: var(--gap-2xs);縦方向の gap。--gap-2xs に定義した数値が適用されます。

Useage

cols gap row-gap

 
 
 
 
1<div className='cols gap row-gap'>
2  <div className='cols:6'>...</div>
3  <div className='cols:6'>...</div>
4  <div className='cols:6'>...</div>
5  <div className='cols:6'>...</div>
6</div>

cols gap:sm row-gap:sm

 
 
 
 
1<div className='cols gap:sm row-gap:sm'>
2  <div className='cols:6'>...</div>
3  <div className='cols:6'>...</div>
4  <div className='cols:6'>...</div>
5  <div className='cols:6'>...</div>
6</div>

cols gap:xs

 
 
1<div className='cols gap:xs'>
2  <div className='cols:6'>...</div>
3  <div className='cols:6'>...</div>
4</div>

cols gap:2xs

 
 
1<div className='cols gap:2xs'>
2  <div className='cols:6'>...</div>
3  <div className='cols:6'>...</div>
4</div>

Settings

各種値については "settings/gaps.css" で定義します。

Learn more