Catpow SCSS

background image

flex_equalize

子要素の数によってflex-basisを調整し、行ごとの要素数の差が１以上にならないようにします。
scss
@import 'catpow';

@include flex_equalize(4);
css
 > * {
  flex-grow: 1;
  box-sizing: border-box;
}
 > *:first-child:nth-last-child(2),  > *:first-child:nth-last-child(2) ~ *,  > *:first-child:nth-last-child(5),  > *:first-child:nth-last-child(5) ~ * {
  flex-basis: 50%;
}
 > *,  > *:first-child:nth-last-child(3),  > *:first-child:nth-last-child(3) ~ *,  > *:first-child:nth-last-child(5) ~ *:nth-child(2n):nth-last-child(3n + 1) ~ * {
  flex-basis: 33%;
}
 > *:first-child:nth-last-child(4n),  > *:first-child:nth-last-child(4n) ~ *,  > *:nth-child(3n):nth-last-child(4n + 1) ~ * {
  flex-basis: 25%;
}