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)

子要素の左右間に隙間を作る。