3@TECH BLOG

日々の業務で得た知見やノウハウ、技術情報などを発信します。

グリッドシステム sun@grid改(flex版)

グリッドシステム sun@grid改(flex版)

bootstrap のグリッドシステムをflexで組み替えました。ブレイクポイントで切り替える要素を追加しています。 xs:0 ~ 767px sm:768px ~ 991px md:992px ~ 1199px lg:1200px ~

Source

CSS
/* ================================================
 Grid-system [xs] 768 [sm] 992 [md] 1200 [lg]
================================================ */
.sunflex {display: flex; flex-wrap: wrap;}

.sunflex.inline {display: inline-flex;}

.sunflex.reverse {flex-direction: row-reverse; justify-content: flex-end;}
.sunflex.reverse.left {justify-content: flex-end;}
.sunflex.reverse.right {justify-content: flex-start;}

.sunflex.between {justify-content: space-between;}
.sunflex.around {justify-content: space-around;}
.sunflex.center {justify-content: center;}
.sunflex.left {justify-content: flex-start;}
.sunflex.right {justify-content: flex-end;}

.sunflex.top {align-items: flex-start;}
.sunflex.top.stretch {align-items: stretch;}
.sunflex.top.stretch>* {display: flex; align-items: flex-start;}

.sunflex.middle {align-items: center;}
.sunflex.middle.stretch {align-items: stretch;}
.sunflex.middle.stretch>* {display: flex; align-items: center;}

.sunflex.bottom {align-items: flex-end;}
.sunflex.bottom.stretch {align-items: stretch;}
.sunflex.bottom.stretch>* {display: flex; align-items: flex-end;}

.sunflex.contentTop {align-content: flex-start;}
.sunflex.contentMiddle {align-content: center;}
.sunflex.contentBottom {align-content: flex-end;}
.sunflex.contentStrech {align-content: stretch;}
.sunflex.contentBetween {align-content: space-between;}
.sunflex.contentAround {align-content: space-around;}

.sunflex>.top:not(.sunflex) {align-self: flex-start;}
.sunflex>.middle:not(.sunflex) {align-self: center;}
.sunflex>.bottom:not(.sunflex) {align-self: flex-end;}

.sunflex>* {list-style: none;}

.sunflex *[class^="col-"]>*,
.sunflex *[class^="size-"]>*,
.sunflex *[class^="mono-"]>* {height: 100%;}

.row {margin-right: -1.5%; margin-left: -1.5%;}
.row:not(.flex):after {
    content: "";
    display: block;
    clear: both;}
.row+.row {margin-top: 1em;}

.row *[class^="col-"], .row *[class^="size-"], .row *[class^="mono-"] {
    position: relative;
    min-height: 1px;
    padding-right: 1.5%;
    padding-left: 1.5%;
}

.size-xs-05 {width: 5%;}
.size-xs-10 {width: 10%;}
.size-xs-15 {width: 15%;}
.size-xs-20 {width: 20%;}
.size-xs-25 {width: 25%;}
.size-xs-30 {width: 30%;}
.size-xs-35 {width: 35%;}
.size-xs-40 {width: 40%;}
.size-xs-45 {width: 45%;}
.size-xs-50 {width: 50%;}
.size-xs-55 {width: 55%;}
.size-xs-60 {width: 60%;}
.size-xs-65 {width: 65%;}
.size-xs-70 {width: 70%;}
.size-xs-75 {width: 75%;}
.size-xs-80 {width: 80%;}
.size-xs-85 {width: 85%;}
.size-xs-90 {width: 90%;}
.size-xs-95 {width: 95%;}
.size-xs-100 {width: 100%;}

@media print, screen and (min-width: 768px) {
    .size-sm-05 {width: 5%;}
    .size-sm-10 {width: 10%;}
    .size-sm-15 {width: 15%;}
    .size-sm-20 {width: 20%;}
    .size-sm-25 {width: 25%;}
    .size-sm-30 {width: 30%;}
    .size-sm-35 {width: 35%;}
    .size-sm-40 {width: 40%;}
    .size-sm-45 {width: 45%;}
    .size-sm-50 {width: 50%;}
    .size-sm-55 {width: 55%;}
    .size-sm-60 {width: 60%;}
    .size-sm-65 {width: 65%;}
    .size-sm-70 {width: 70%;}
    .size-sm-75 {width: 75%;}
    .size-sm-80 {width: 80%;}
    .size-sm-85 {width: 85%;}
    .size-sm-90 {width: 90%;}
    .size-sm-95 {width: 95%;}
    .size-sm-100 {width: 100%;}
}

@media screen and (min-width: 992px) {
    .size-md-05 {width: 5%;}
    .size-md-10 {width: 10%;}
    .size-md-15 {width: 15%;}
    .size-md-20 {width: 20%;}
    .size-md-25 {width: 25%;}
    .size-md-30 {width: 30%;}
    .size-md-35 {width: 35%;}
    .size-md-40 {width: 40%;}
    .size-md-45 {width: 45%;}
    .size-md-50 {width: 50%;}
    .size-md-55 {width: 55%;}
    .size-md-60 {width: 60%;}
    .size-md-65 {width: 65%;}
    .size-md-70 {width: 70%;}
    .size-md-75 {width: 75%;}
    .size-md-80 {width: 80%;}
    .size-md-85 {width: 85%;}
    .size-md-90 {width: 90%;}
    .size-md-95 {width: 95%;}
    .size-md-100 {width: 100%;}
}

@media screen and (min-width: 1200px) {
    .size-lg-05 {width: 5%;}
    .size-lg-10 {width: 10%;}
    .size-lg-15 {width: 15%;}
    .size-lg-20 {width: 20%;}
    .size-lg-25 {width: 25%;}
    .size-lg-30 {width: 30%;}
    .size-lg-35 {width: 35%;}
    .size-lg-40 {width: 40%;}
    .size-lg-45 {width: 45%;}
    .size-lg-50 {width: 50%;}
    .size-lg-55 {width: 55%;}
    .size-lg-60 {width: 60%;}
    .size-lg-65 {width: 65%;}
    .size-lg-70 {width: 70%;}
    .size-lg-75 {width: 75%;}
    .size-lg-80 {width: 80%;}
    .size-lg-85 {width: 85%;}
    .size-lg-90 {width: 90%;}
    .size-lg-95 {width: 95%;}
    .size-lg-100 {width: 100%;}
}

.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66667%;}
.col-xs-10 {width: 83.33333%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66667%;}
.col-xs-7 {width: 58.33333%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66667%;}
.col-xs-4 {width: 33.33333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66667%;}
.col-xs-1 {width: 8.33333%;}
.mono-xs-5 {width: 20%;}
.mono-xs-7 {width: 14.28571%;}
.mono-xs-8 {width: 12.5%;}
.mono-xs-9 {width: 11.11111%;}
.mono-xs-10 {width: 10%;}
.mono-xs-11 {width: 9.09091%;}

@media print, screen and (min-width: 768px) {
    .col-sm-12 {width: 100%;}
    .col-sm-11 {width: 91.66667%;}
    .col-sm-10 {width: 83.33333%;}
    .col-sm-9 {width: 75%;}
    .col-sm-8 {width: 66.66667%;}
    .col-sm-7 {width: 58.33333%;}
    .col-sm-6 {width: 50%;}
    .col-sm-5 {width: 41.66667%;}
    .col-sm-4 {width: 33.33333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66667%;}
    .col-sm-1 {width: 8.33333%;}
    .mono-sm-5 {width: 20%;}
    .mono-sm-7 {width: 14.28571%;}
    .mono-sm-8 {width: 12.5%;}
    .mono-sm-9 {width: 11.11111%;}
    .mono-sm-10 {width: 10%;}
    .mono-sm-11 {width: 9.09091%;}
}

@media screen and (min-width: 992px) {
    .col-md-12 {width: 100%;}
    .col-md-11 {width: 91.66667%;}
    .col-md-10 {width: 83.33333%;}
    .col-md-9 {width: 75%;}
    .col-md-8 {width: 66.66667%;}
    .col-md-7 {width: 58.33333%;}
    .col-md-6 {width: 50%;}
    .col-md-5 {width: 41.66667%;}
    .col-md-4 {width: 33.33333%;}
    .col-md-3 {width: 25%;}
    .col-md-2 {width: 16.66667%;}
    .col-md-1 {width: 8.33333%;}
    .mono-md-5 {width: 20%;}
    .mono-md-7 {width: 14.28571%;}
    .mono-md-8 {width: 12.5%;}
    .mono-md-9 {width: 11.11111%;}
    .mono-md-10 {width: 10%;}
    .mono-md-11 {width: 9.09091%;}
}

@media screen and (min-width: 1200px) {
    .col-lg-12 {width: 100%;}
    .col-lg-11 {width: 91.66667%;}
    .col-lg-10 {width: 83.33333%;}
    .col-lg-9 {width: 75%;}
    .col-lg-8 {width: 66.66667%;}
    .col-lg-7 {width: 58.33333%;}
    .col-lg-6 {width: 50%;}
    .col-lg-5 {width: 41.66667%;}
    .col-lg-4 {width: 33.33333%;}
    .col-lg-3 {width: 25%;}
    .col-lg-2 {width: 16.66667%;}
    .col-lg-1 {width: 8.33333%;}
    .mono-lg-5 {width: 20%;}
    .mono-lg-7 {width: 14.28571%;}
    .mono-lg-8 {width: 12.5%;}
    .mono-lg-9 {width: 11.11111%;}
    .mono-lg-10 {width: 10%;}
    .mono-lg-11 {width: 9.09091%;}
}
.row:not(.flex) *[class^="col-xs-"],
.row:not(.flex) *[class^="size-xs-"],
.row:not(.flex) *[class^="mono-xs-"] {float: left;}

.row:not(.flex).reverse *[class^="col-xs-"],
.row:not(.flex).reverse *[class^="size-xs-"],
.row:not(.flex).reverse *[class^="mono-xs-"] {float: right;}

.row.flex {display: flex; flex-wrap: wrap;}
.row.flex.reverse {flex-direction: row-reverse;}

@media print, screen and (min-width: 768px) {
    .row:not(.flex) *[class^="col-sm-"],
    .row:not(.flex) *[class^="size-sm-"],
    .row:not(.flex) *[class^="mono-sm-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-sm-"],
    .row:not(.flex).reverse *[class^="size-sm-"],
    .row:not(.flex).reverse *[class^="mono-sm-"] {float: right;}
}

@media screen and (min-width: 992px) {
    .row:not(.flex) *[class^="col-md-"],
    .row:not(.flex) *[class^="size-md-"],
    .row:not(.flex) *[class^="mono-md-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-md-"],
    .row:not(.flex).reverse *[class^="size-md-"],
    .row:not(.flex).reverse *[class^="mono-md-"] {float: right;}
}

@media screen and (min-width: 1200px) {
    .row:not(.flex) *[class^="col-lg-"],
    .row:not(.flex) *[class^="size-lg-"],
    .row:not(.flex) *[class^="mono-lg-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-lg-"],
    .row:not(.flex).reverse *[class^="size-lg-"],
    .row:not(.flex).reverse *[class^="mono-lg-"] {float: right;}
}

.col-xs-offset-12 {margin-left: 100%;}
.col-xs-offset-11 {margin-left: 91.66667%;}
.col-xs-offset-10 {margin-left: 83.33333%;}
.col-xs-offset-9 {margin-left: 75%;}
.col-xs-offset-8 {margin-left: 66.66667%;}
.col-xs-offset-7 {margin-left: 58.33333%;}
.col-xs-offset-6 {margin-left: 50%;}
.col-xs-offset-5 {margin-left: 41.66667%;}
.col-xs-offset-4 {margin-left: 33.33333%;}
.col-xs-offset-3 {margin-left: 25%;}
.col-xs-offset-2 {margin-left: 16.66667%;}
.col-xs-offset-1 {margin-left: 8.33333%;}
.col-xs-offset-0 {margin-left: 0;}

@media print, screen and (min-width: 768px) {
    .col-sm-offset-12 {margin-left: 100%;}
    .col-sm-offset-11 {margin-left: 91.66667%;}
    .col-sm-offset-10 {margin-left: 83.33333%;}
    .col-sm-offset-9 {margin-left: 75%;}
    .col-sm-offset-8 {margin-left: 66.66667%;}
    .col-sm-offset-7 {margin-left: 58.33333%;}
    .col-sm-offset-6 {margin-left: 50%;}
    .col-sm-offset-5 {margin-left: 41.66667%;}
    .col-sm-offset-4 {margin-left: 33.33333%;}
    .col-sm-offset-3 {margin-left: 25%;}
    .col-sm-offset-2 {margin-left: 16.66667%;}
    .col-sm-offset-1 {margin-left: 8.33333%;}
    .col-sm-offset-0 {margin-left: 0;}
}

@media screen and (min-width: 992px) {
    .col-md-offset-12 {margin-left: 100%;}
    .col-md-offset-11 {margin-left: 91.66667%;}
    .col-md-offset-10 {margin-left: 83.33333%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-8 {margin-left: 66.66667%;}
    .col-md-offset-7 {margin-left: 58.33333%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-5 {margin-left: 41.66667%;}
    .col-md-offset-4 {margin-left: 33.33333%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-2 {margin-left: 16.66667%;}
    .col-md-offset-1 {margin-left: 8.33333%;}
    .col-md-offset-0 {margin-left: 0;}
}

@media screen and (min-width: 1200px) {
    .col-lg-offset-12 {margin-left: 100%;}
    .col-lg-offset-11 {margin-left: 91.66667%;}
    .col-lg-offset-10 {margin-left: 83.33333%;}
    .col-lg-offset-9 {margin-left: 75%;}
    .col-lg-offset-8 {margin-left: 66.66667%;}
    .col-lg-offset-7 {margin-left: 58.33333%;}
    .col-lg-offset-6 {margin-left: 50%;}
    .col-lg-offset-5 {margin-left: 41.66667%;}
    .col-lg-offset-4 {margin-left: 33.33333%;}
    .col-lg-offset-3 {margin-left: 25%;}
    .col-lg-offset-2 {margin-left: 16.66667%;}
    .col-lg-offset-1 {margin-left: 8.33333%;}
    .col-lg-offset-0 {margin-left: 0;}
}

.col-xs-pull-12 {right: 100%;}
.col-xs-pull-11 {right: 91.66667%;}
.col-xs-pull-10 {right: 83.33333%;}
.col-xs-pull-9 {right: 75%;}
.col-xs-pull-8 {right: 66.66667%;}
.col-xs-pull-7 {right: 58.33333%;}
.col-xs-pull-6 {right: 50%;}
.col-xs-pull-5 {right: 41.66667%;}
.col-xs-pull-4 {right: 33.33333%;}
.col-xs-pull-3 {right: 25%;}
.col-xs-pull-2 {right: 16.66667%;}
.col-xs-pull-1 {right: 8.33333%;}
.col-xs-pull-0 {right: auto;}

@media print, screen and (min-width: 768px) {
    .col-sm-pull-12 {right: 100%;}
    .col-sm-pull-11 {right: 91.66667%;}
    .col-sm-pull-10 {right: 83.33333%;}
    .col-sm-pull-9 {right: 75%;}
    .col-sm-pull-8 {right: 66.66667%;}
    .col-sm-pull-7 {right: 58.33333%;}
    .col-sm-pull-6 {right: 50%;}
    .col-sm-pull-5 {right: 41.66667%;}
    .col-sm-pull-4 {right: 33.33333%;}
    .col-sm-pull-3 {right: 25%;}
    .col-sm-pull-2 {right: 16.66667%;}
    .col-sm-pull-1 {right: 8.33333%;}
    .col-sm-pull-0 {right: auto;}
}

@media screen and (min-width: 992px) {
    .col-md-pull-12 {right: 100%;}
    .col-md-pull-11 {right: 91.66667%;}
    .col-md-pull-10 {right: 83.33333%;}
    .col-md-pull-9 {right: 75%;}
    .col-md-pull-8 {right: 66.66667%;}
    .col-md-pull-7 {right: 58.33333%;}
    .col-md-pull-6 {right: 50%;}
    .col-md-pull-5 {right: 41.66667%;}
    .col-md-pull-4 {right: 33.33333%;}
    .col-md-pull-3 {right: 25%;}
    .col-md-pull-2 {right: 16.66667%;}
    .col-md-pull-1 {right: 8.33333%;}
    .col-md-pull-0 {right: auto;}
}

@media screen and (min-width: 1200px) {
    .col-lg-pull-12 {right: 100%;}
    .col-lg-pull-11 {right: 91.66667%;}
    .col-lg-pull-10 {right: 83.33333%;}
    .col-lg-pull-9 {right: 75%;}
    .col-lg-pull-8 {right: 66.66667%;}
    .col-lg-pull-7 {right: 58.33333%;}
    .col-lg-pull-6 {right: 50%;}
    .col-lg-pull-5 {right: 41.66667%;}
    .col-lg-pull-4 {right: 33.33333%;}
    .col-lg-pull-3 {right: 25%;}
    .col-lg-pull-2 {right: 16.66667%;}
    .col-lg-pull-1 {right: 8.33333%;}
    .col-lg-pull-0 {right: auto;}
}

.col-xs-push-12 {left: 100%;}
.col-xs-push-11 {left: 91.66667%;}
.col-xs-push-10 {left: 83.33333%;}
.col-xs-push-9 {left: 75%;}
.col-xs-push-8 {left: 66.66667%;}
.col-xs-push-7 {left: 58.33333%;}
.col-xs-push-6 {left: 50%;}
.col-xs-push-5 {left: 41.66667%;}
.col-xs-push-4 {left: 33.33333%;}
.col-xs-push-3 {left: 25%;}
.col-xs-push-2 {left: 16.66667%;}
.col-xs-push-1 {left: 8.33333%;}
.col-xs-push-0 {left: auto;}

@media print, screen and (min-width: 768px) {
    .col-sm-push-12 {left: 100%;}
    .col-sm-push-11 {left: 91.66667%;}
    .col-sm-push-10 {left: 83.33333%;}
    .col-sm-push-9 {left: 75%;}
    .col-sm-push-8 {left: 66.66667%;}
    .col-sm-push-7 {left: 58.33333%;}
    .col-sm-push-6 {left: 50%;}
    .col-sm-push-5 {left: 41.66667%;}
    .col-sm-push-4 {left: 33.33333%;}
    .col-sm-push-3 {left: 25%;}
    .col-sm-push-2 {left: 16.66667%;}
    .col-sm-push-1 {left: 8.33333%;}
    .col-sm-push-0 {left: auto;}
}

@media screen and (min-width: 992px) {
    .col-md-push-12 {left: 100%;}
    .col-md-push-11 {left: 91.66667%;}
    .col-md-push-10 {left: 83.33333%;}
    .col-md-push-9 {left: 75%;}
    .col-md-push-8 {left: 66.66667%;}
    .col-md-push-7 {left: 58.33333%;}
    .col-md-push-6 {left: 50%;}
    .col-md-push-5 {left: 41.66667%;}
    .col-md-push-4 {left: 33.33333%;}
    .col-md-push-3 {left: 25%;}
    .col-md-push-2 {left: 16.66667%;}
    .col-md-push-1 {left: 8.33333%;}
    .col-md-push-0 {left: auto;}
}

@media screen and (min-width: 1200px) {
    .col-lg-push-12 {left: 100%;}
    .col-lg-push-11 {left: 91.66667%;}
    .col-lg-push-10 {left: 83.33333%;}
    .col-lg-push-9 {left: 75%;}
    .col-lg-push-8 {left: 66.66667%;}
    .col-lg-push-7 {left: 58.33333%;}
    .col-lg-push-6 {left: 50%;}
    .col-lg-push-5 {left: 41.66667%;}
    .col-lg-push-4 {left: 33.33333%;}
    .col-lg-push-3 {left: 25%;}
    .col-lg-push-2 {left: 16.66667%;}
    .col-lg-push-1 {left: 8.33333%;}
    .col-lg-push-0 {left: auto;}
}

Contact お問い合わせ

お気軽にお問い合わせください。

PageTop