HTML
<div class="flexbox">
<div class="flex box-xs-1">
xs-1
</div>
<div class="flex box-xs-2">
xs-2
</div>
<div class="flex box-xs-3">
xs-3
</div>
<div class="flex box-xs-6">
xs-6
</div>
</div>
<div class="flexbox">
<div class="flex box-md-4">
md-4
</div>
<div class="flex box-md-4">
md-4
</div>
<div class="flex box-md-4">
md-4
</div>
</div>
<div class="flexbox">
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
<div class="flex box-sm-1">
sm-1
</div>
</div>
SCSS
*,
*::before,
*::after {
box-sizing: border-box;
}
// breakpoints
$breakpoints: (
xs: 32rem,
sm: 48rem,
md: 72rem,
lg: 96rem,
xl: 102rem,
xx: 120rem
);
// media query mixin
@mixin break($size) {
@media (min-width: map-get($breakpoints, $size)) {
@content;
}
}
// number of columns
$items: 12;
// flexbox container
.flexbox {
display: flex;
flex-flow: row wrap;
margin-bottom: 1rem;
}
// flexbox item
.flex {
padding: 0.5rem;
&:nth-child(even) {
background-color: #eee;
}
&:nth-child(odd) {
background-color: #ddd;
}
}
// loop over the breakpoints
@each $key, $value in $breakpoints {
@for $i from 1 through $items {
.box-#{$key}-#{$i} {
flex: 0 0 100%;
@include break($key) {
flex: 0 0 #{$i / $items * 100%};
}
}
}
}
