Catpow SCSS

background image

flx

フレックスレイアウト関連のプロパティを設定します。

Params

w
flex-wrap

Keyword
  • n
    nowrap
  • w
    wrap
  • r
    wrap-reverse

j,jc
justify-content

Keyword
  • s
    flex-start
  • e
    flex-end
  • c
    center
  • b
    space-between
  • a
    space-around

v,ac
align-content

Keyword
  • s
    flex-start
  • e
    flex-end
  • c
    center
  • b
    space-between
  • a
    space-around

ji
justify-items

Keyword
  • s
    flex-start
  • e
    flex-end
  • c
    center
  • b
    space-between
  • a
    space-around

a,ai
align-items

Keyword
  • s
    flex-start
  • e
    flex-end
  • c
    center
  • b
    baseline
  • f
    stretch

d
flex-direction

Keyword
  • r
    row
  • rr
    row-reverse
  • c
    column
  • cr
    column-reverse

g
gap

c
[flex column count]

scss
@import 'catpow';

@include flx((w:w,g:20));
css
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-lines: multiple;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;