@hysryt/flexutil
v2.12.1
Published
Flexboxの詰め合わせ
Downloads
3
Readme
FlexUtil
<div class="u-flex _center-x">
<div class="u-flex-item">...</div>
<div class="u-flex-item">...</div>
<div class="u-flex-item _full">...</div>
</div>
前置き
flex-direction: column
は基本的に使わない。ブレークポイントは
0px - 767px
(スマートフォン用)768px - 991px
(タブレット用)992px - 無限大
(PC用)
_
で始まるクラスはsp
またはtb
またはpc
をつけてブレークポイントごとの指定ができる。 例)_equally
→_sp-equally
| 識別子 | 対象 | | - | - | |
sp
| スマートフォン | |tb
| タブレット | |pc
| PC |
u-flex
display: flex
を適用する。
_center-x
justify-items: center
を適用する。
_center-y
align-items: center
を適用する。
_left
justify-items: flex-start
を適用する。
ただし _reverse
が指定されている場合は justify-items: flex-end
を適用する。
_right
justify-items: flex-end
を適用する。
ただし _reverse
が指定されている場合は justify-items: flex-start
を適用する。
_equally
子要素の u-flex-item
を均等な幅で横一列に並べる。
_col-n
子要素を縦n列に並べる。
n
は 1
から $col-maxnum
までで、 $col-maxnum
のデフォルトは 5
。
_reverse
flex-direction: row-reverse
を適用する。
_space-between
, _sbw
justify-items: space-between
を適用する。
_gap
u-flex-item
同士の左右間に隙間を作る。
sp-
などのプレフィックスは使えない。
u-flex-item
_grow
flex: 1
を適用する。
_full
flex: 0 0 100%
を適用する。
_basis-n
flex-basis: n
と flex-shrink: 1
を適用する。
n
は $u-flex-item-basis-list
にリストで指定する。
$u-flex-item-basis-list
のデフォルトは 100, 200, 300, 400, 500
。
_basis-np
flex-basis: n%
と flex-shrink: 1
を適用する。
n
は $u-flex-item-basis-percent-list
にリストで指定する。
$u-flex-item-basis-percent-list
のデフォルトは 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
。
mixin
gap($size)
子要素の左右間に隙間を作る。