巷に様々な grid system がありますが、マルチクラスで長いクラスがずらずらと続いてhtmlの見通しが悪いのが好きじゃなかったので、手軽に使いやすいものを目指して作ってみました。
css容量は大きめですが、その分、html側の記述は少なくなります。
コンテナ要素にcolsでカラム数を指定し、各セルはtableのcolspan感覚でカラムサイズに応じたクラスを追加します。
セル間の余白(gap・gutters)は 0,4px,8px,16px,24px の5パターン用意しています。
レスポンシブ非対応。現状、カラムサイズをcalcで分数計算していますが、IEの小数点処理の関係でカラム落ちすることがあるため、小数点第二位以下切捨ての％指定に変更する予定です。 （修正しました）
(追記) カラムパターンを減らして容量削減した 10 Column Grid、12 Column Grid も作りました。
css
@charrset "utf-8";
/* flexbox grid system +++++++++++++++++++ */
/* container */
.l-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: stretch;
}
.l-flex.rows { flex-direction: column; }
.l-flex:not(.rows).top { align-content: flex-start; align-items: flex-start;}
.l-flex:not(.rows).middle { align-content: center; align-items: center;}
.l-flex:not(.rows).bottom { align-content: flex-end; align-items: flex-end;}
.l-flex:not(.rows).end { justify-content: flex-end; }
.l-flex:not(.rows).center { justify-content: center; }
.l-flex.between { justify-content: space-between; }
.l-flex.rows.middle { justify-content: center; }
.l-flex.rows.bottom { justify-content: flex-end; }
/* items */
.l-flex.fit > .row,
.l-flex.fit > .col,
.l-flex.fit > .col2,
.l-flex.fit > .col3,
.l-flex.fit > .col4,
.l-flex.fit > .col5,
.l-flex.fit > .col6,
.l-flex.fit > .col7,
.l-flex.fit > .col8 {
flex-grow: 1; }
.l-flex > .top { align-self: flex-start; }
.l-flex > .bottom { align-self: flex-end; }
.l-flex > .center { align-self: center; }
.l-flex > .baseline { align-self: baseline; }
.l-flex > .grow { flex-grow: 1; }
.l-flex > .fit { display: flex; align-items: stretch; }
.l-flex > .fit > .l-flex { flex-grow: 1; }
/* gap */
.l-flex.gap4 { margin-top: -4px; margin-left: -4px; }
.l-flex.gap8 { margin-top: -8px; margin-left: -8px; }
.l-flex.gap16 { margin-top: -16px; margin-left: -16px; }
.l-flex.gap24 { margin-top: -24px; margin-left: -24px; }
.l-flex.gapx4 { margin-left: -4px; }
.l-flex.gapx8 { margin-left: -8px; }
.l-flex.gapx16 { margin-left: -16px; }
.l-flex.gapx24 { margin-left: -24px; }
.l-flex.gapy4 { margin-top: -4px; }
.l-flex.gapy8 { margin-top: -8px; }
.l-flex.gapy16 { margin-top: -16px; }
.l-flex.gapy24 { margin-top: -24px; }
.l-flex.gap4 > .row,
.l-flex.gap4 > .col,
.l-flex.gap4 > .col2,
.l-flex.gap4 > .col3,
.l-flex.gap4 > .col4,
.l-flex.gap4 > .col5,
.l-flex.gap4 > .col6,
.l-flex.gap4 > .col7,
.l-flex.gap4 > .col8 {
margin-top: 4px; margin-left: 4px; }
.l-flex.gap8 > .row,
.l-flex.gap8 > .col,
.l-flex.gap8 > .col2,
.l-flex.gap8 > .col3,
.l-flex.gap8 > .col4,
.l-flex.gap8 > .col5,
.l-flex.gap8 > .col6,
.l-flex.gap8 > .col7,
.l-flex.gap8 > .col8 {
margin-top: 8px; margin-left: 8px; }
.l-flex.gap16 > .row,
.l-flex.gap16 > .col,
.l-flex.gap16 > .col2,
.l-flex.gap16 > .col3,
.l-flex.gap16 > .col4,
.l-flex.gap16 > .col5,
.l-flex.gap16 > .col6,
.l-flex.gap16 > .col7,
.l-flex.gap16 > .col8 {
margin-top: 16px; margin-left: 16px; }
.l-flex.gap24 > .row,
.l-flex.gap24 > .col,
.l-flex.gap24 > .col2,
.l-flex.gap24 > .col3,
.l-flex.gap24 > .col4,
.l-flex.gap24 > .col5,
.l-flex.gap24 > .col6,
.l-flex.gap24 > .col7,
.l-flex.gap24 > .col8 {
margin-top: 24px; margin-left: 24px; }
.l-flex.gapx4 > .row,
.l-flex.gapx4 > .col,
.l-flex.gapx4 > .col2,
.l-flex.gapx4 > .col3,
.l-flex.gapx4 > .col4,
.l-flex.gapx4 > .col5,
.l-flex.gapx4 > .col6,
.l-flex.gapx4 > .col7,
.l-flex.gapx4 > .col8 {
margin-left: 4px; }
.l-flex.gapx8 > .row,
.l-flex.gapx8 > .col,
.l-flex.gapx8 > .col2,
.l-flex.gapx8 > .col3,
.l-flex.gapx8 > .col4,
.l-flex.gapx8 > .col5,
.l-flex.gapx8 > .col6,
.l-flex.gapx8 > .col7,
.l-flex.gapx8 > .col8 {
margin-left: 8px; }
.l-flex.gapx16 > .row,
.l-flex.gapx16 > .col,
.l-flex.gapx16 > .col2,
.l-flex.gapx16 > .col3,
.l-flex.gapx16 > .col4,
.l-flex.gapx16 > .col5,
.l-flex.gapx16 > .col6,
.l-flex.gapx16 > .col7,
.l-flex.gapx16 > .col8 {
margin-left: 16px; }
.l-flex.gapx24 > .row,
.l-flex.gapx24 > .col,
.l-flex.gapx24 > .col2,
.l-flex.gapx24 > .col3,
.l-flex.gapx24 > .col4,
.l-flex.gapx24 > .col5,
.l-flex.gapx24 > .col6,
.l-flex.gapx24 > .col7,
.l-flex.gapx24 > .col8,
.l-flex.gapx24 > .col9,
.l-flex.gapx24 > .col10,
.l-flex.gapx24 > .col11,
.l-flex.gapx24 > .col12 {
margin-left: 24px; }
.l-flex.gapy4 > .row,
.l-flex.gapy4 > .col,
.l-flex.gapy4 > .col2,
.l-flex.gapy4 > .col3,
.l-flex.gapy4 > .col4,
.l-flex.gapy4 > .col5,
.l-flex.gapy4 > .col6,
.l-flex.gapy4 > .col7,
.l-flex.gapy4 > .col8 {
margin-top: 4px; }
.l-flex.gapy8 > .row,
.l-flex.gapy8 > .col,
.l-flex.gapy8 > .col2,
.l-flex.gapy8 > .col3,
.l-flex.gapy8 > .col4,
.l-flex.gapy8 > .col5,
.l-flex.gapy8 > .col6,
.l-flex.gapy8 > .col7,
.l-flex.gapy8 > .col8 {
margin-top: 8px; }
.l-flex.gapy16 > .row,
.l-flex.gapy16 > .col,
.l-flex.gapy16 > .col2,
.l-flex.gapy16 > .col3,
.l-flex.gapy16 > .col4,
.l-flex.gapy16 > .col5,
.l-flex.gapy16 > .col6,
.l-flex.gapy16 > .col7,
.l-flex.gapy16 > .col8 {
margin-top: 16px; }
.l-flex.gapy24 > .row,
.l-flex.gapy24 > .col,
.l-flex.gapy24 > .col2,
.l-flex.gapy24 > .col3,
.l-flex.gapy24 > .col4,
.l-flex.gapy24 > .col5,
.l-flex.gapy24 > .col6,
.l-flex.gapy24 > .col7,
.l-flex.gapy24 > .col8 {
margin-top: 24px; }
/* width */
.l-flex > .row,
.l-flex.cols2 > .col2,
.l-flex.cols3 > .col3,
.l-flex.cols4 > .col4,
.l-flex.cols5 > .col5,
.l-flex.cols6 > .col6,
.l-flex.cols7 > .col7,
.l-flex.cols8 > .col8 {
width: 100%; }
.l-flex.cols8 > .col7 {
width: 87.5%; }
.l-flex.cols7 > .col6 {
width: 85.71%; }
.l-flex.cols6 > .col5 {
width: 83.33%; }
.l-flex.cols5 > .col4 {
width: 80%; }
.l-flex.cols4 > .col3,
.l-flex.cols8 > .col6 {
width: 75%; }
.l-flex.cols7 > .col5 {
width: 71.42%; }
.l-flex.cols3 > .col2,
.l-flex.cols6 > .col4 {
width: 66.66%; }
.l-flex.cols8 > .col5 {
width: 62.5%; }
.l-flex.cols5 > .col3 {
width: 60%; }
.l-flex.cols7 > .col4 {
width: 57.14%; }
.l-flex.cols2 > .col,
.l-flex.cols4 > .col2,
.l-flex.cols6 > .col3,
.l-flex.cols8 > .col4 {
width: 50%; }
.l-flex.cols7 > .col3 {
width: 42.85%; }
.l-flex.cols5 > .col2 {
width: 40%; }
.l-flex.cols8 > .col3 {
width: 37.5%; }
.l-flex.cols3 > .col,
.l-flex.cols6 > .col2 {
width: 33.33%; }
.l-flex.cols7 > .col2 {
width: 28.57%; }
.l-flex.cols4 > .col,
.l-flex.cols8 > .col2 {
width: 25%; }
.l-flex.cols5 > .col {
width: 20%; }
.l-flex.cols6 > .col {
width: 16.66%; }
.l-flex.cols7 > .col {
width: 14.28%; }
.l-flex.cols8 > .col {
width: 12.5%; }
.l-flex.gap4 > .row,
.l-flex.gap4.cols2 > .col2,
.l-flex.gap4.cols3 > .col3,
.l-flex.gap4.cols4 > .col4,
.l-flex.gap4.cols5 > .col5,
.l-flex.gap4.cols6 > .col6,
.l-flex.gap4.cols7 > .col7,
.l-flex.gap4.cols8 > .col8,
.l-flex.gapx4 > .row,
.l-flex.gapx4.cols2 > .col2,
.l-flex.gapx4.cols3 > .col3,
.l-flex.gapx4.cols4 > .col4,
.l-flex.gapx4.cols5 > .col5,
.l-flex.gapx4.cols6 > .col6,
.l-flex.gapx4.cols7 > .col7,
.l-flex.gapx4.cols8 > .col8 {
width: calc(100% - 4px); }
.l-flex.gap4.cols8 > .col7,
.l-flex.gapx4.cols8 > .col7 {
width: calc(87.5% - 4px); }
.l-flex.gap4.cols7 > .col6,
.l-flex.gapx4.cols7 > .col6 {
width: calc(85.71% - 4px); }
.l-flex.gap4.cols6 > .col5,
.l-flex.gapx4.cols6 > .col5 {
width: calc(83.33% - 4px); }
.l-flex.gap4.cols5 > .col4,
.l-flex.gapx4.cols5 > .col4 {
width: calc(80% - 4px); }
.l-flex.gap4.cols4 > .col3,
.l-flex.gap4.cols8 > .col6,
.l-flex.gapx4.cols4 > .col3,
.l-flex.gapx4.cols8 > .col6 {
width: calc(75% - 4px); }
.l-flex.gap4.cols7 > .col5,
.l-flex.gapx4.cols7 > .col5{
width: calc(71.42% - 4px); }
.l-flex.gap4.cols3 > .col2,
.l-flex.gap4.cols6 > .col4,
.l-flex.gapx4.cols3 > .col2,
.l-flex.gapx4.cols6 > .col4 {
width: calc(66.66% - 4px); }
.l-flex.gap4.cols8 > .col5,
.l-flex.gapx4.cols8 > .col5 {
width: calc(62.5% - 4px); }
.l-flex.gap4.cols5 > .col3,
.l-flex.gapx4.cols5 > .col3 {
width: calc(60% - 4px); }
.l-flex.gap4.cols7 > .col4,
.l-flex.gapx4.cols7 > .col4 {
width: calc(57.14% - 4px); }
.l-flex.gap4.cols2 > .col,
.l-flex.gap4.cols4 > .col2,
.l-flex.gap4.cols6 > .col3,
.l-flex.gap4.cols8 > .col4,
.l-flex.gapx4.cols2 > .col,
.l-flex.gapx4.cols4 > .col2,
.l-flex.gapx4.cols6 > .col3,
.l-flex.gapx4.cols8 > .col4 {
width: calc(50% - 4px); }
.l-flex.gap4.cols7 > .col3,
.l-flex.gapx4.cols7 > .col3 {
width: calc(42.85% - 4px); }
.l-flex.gap4.cols5 > .col2,
.l-flex.gapx4.cols5 > .col2 {
width: calc(40% - 4px); }
.l-flex.gap4.cols8 > .col3,
.l-flex.gapx4.cols8 > .col3 {
width: calc(37.5% - 4px); }
.l-flex.gap4.cols3 > .col,
.l-flex.gap4.cols6 > .col2,
.l-flex.gapx4.cols3 > .col,
.l-flex.gapx4.cols6 > .col2 {
width: calc(33.33% - 4px); }
.l-flex.gap4.cols7 > .col2,
.l-flex.gapx4.cols7 > .col2 {
width: calc(28.57% - 4px); }
.l-flex.gap4.cols4 > .col,
.l-flex.gap4.cols8 > .col2,
.l-flex.gapx4.cols4 > .col,
.l-flex.gapx4.cols8 > .col2 {
width: calc(25% - 4px); }
.l-flex.gap4.cols5 > .col,
.l-flex.gapx4.cols5 > .col {
width: calc(20% - 4px); }
.l-flex.gap4.cols6 > .col,
.l-flex.gapx4.cols6 > .col {
width: calc(16.66% - 4px); }
.l-flex.gap4.cols7 > .col,
.l-flex.gapx4.cols7 > .col {
width: calc(14.28% - 4px); }
.l-flex.gap4.cols8 > .col,
.l-flex.gapx4.cols8 > .col {
width: calc(12.5% - 4px); }
.l-flex.gap4 > .row,
.l-flex.gap4.cols2 > .col2,
.l-flex.gap4.cols3 > .col3,
.l-flex.gap4.cols4 > .col4,
.l-flex.gap4.cols5 > .col5,
.l-flex.gap4.cols6 > .col6,
.l-flex.gap4.cols7 > .col7,
.l-flex.gap4.cols8 > .col8,
.l-flex.gapx4 > .row,
.l-flex.gapx4.cols2 > .col2,
.l-flex.gapx4.cols3 > .col3,
.l-flex.gapx4.cols4 > .col4,
.l-flex.gapx4.cols5 > .col5,
.l-flex.gapx4.cols6 > .col6,
.l-flex.gapx4.cols7 > .col7,
.l-flex.gapx4.cols8 > .col8 {
width: calc(100% - 4px); }
.l-flex.gap4.cols8 > .col7,
.l-flex.gapx4.cols8 > .col7 {
width: calc(87.5% - 4px); }
.l-flex.gap4.cols7 > .col6,
.l-flex.gapx4.cols7 > .col6 {
width: calc(85.71% - 4px); }
.l-flex.gap4.cols6 > .col5,
.l-flex.gapx4.cols6 > .col5 {
width: calc(83.33% - 4px); }
.l-flex.gap4.cols5 > .col4,
.l-flex.gapx4.cols5 > .col4 {
width: calc(80% - 4px); }
.l-flex.gap4.cols4 > .col3,
.l-flex.gap4.cols8 > .col6,
.l-flex.gapx4.cols4 > .col3,
.l-flex.gapx4.cols8 > .col6 {
width: calc(75% - 4px); }
.l-flex.gap4.cols7 > .col5,
.l-flex.gapx4.cols7 > .col5{
width: calc(71.42% - 4px); }
.l-flex.gap4.cols3 > .col2,
.l-flex.gap4.cols6 > .col4,
.l-flex.gapx4.cols3 > .col2,
.l-flex.gapx4.cols6 > .col4 {
width: calc(66.66% - 4px); }
.l-flex.gap4.cols8 > .col5,
.l-flex.gapx4.cols8 > .col5 {
width: calc(62.5% - 4px); }
.l-flex.gap4.cols5 > .col3,
.l-flex.gapx4.cols5 > .col3 {
width: calc(60% - 4px); }
.l-flex.gap4.cols7 > .col4,
.l-flex.gapx4.cols7 > .col4 {
width: calc(57.14% - 4px); }
.l-flex.gap4.cols2 > .col,
.l-flex.gap4.cols4 > .col2,
.l-flex.gap4.cols6 > .col3,
.l-flex.gap4.cols8 > .col4,
.l-flex.gapx4.cols2 > .col,
.l-flex.gapx4.cols4 > .col2,
.l-flex.gapx4.cols6 > .col3,
.l-flex.gapx4.cols8 > .col4 {
width: calc(50% - 4px); }
.l-flex.gap4.cols7 > .col3,
.l-flex.gapx4.cols7 > .col3 {
width: calc(42.85% - 4px); }
.l-flex.gap4.cols5 > .col2,
.l-flex.gapx4.cols5 > .col2 {
width: calc(40% - 4px); }
.l-flex.gap4.cols8 > .col3,
.l-flex.gapx4.cols8 > .col3 {
width: calc(37.5% - 4px); }
.l-flex.gap4.cols3 > .col,
.l-flex.gap4.cols6 > .col2,
.l-flex.gapx4.cols3 > .col,
.l-flex.gapx4.cols6 > .col2 {
width: calc(33.33% - 4px); }
.l-flex.gap4.cols7 > .col2,
.l-flex.gapx4.cols7 > .col2 {
width: calc(28.57% - 4px); }
.l-flex.gap4.cols4 > .col,
.l-flex.gap4.cols8 > .col2,
.l-flex.gapx4.cols4 > .col,
.l-flex.gapx4.cols8 > .col2 {
width: calc(25% - 4px); }
.l-flex.gap4.cols5 > .col,
.l-flex.gapx4.cols5 > .col {
width: calc(20% - 4px); }
.l-flex.gap4.cols6 > .col,
.l-flex.gapx4.cols6 > .col {
width: calc(16.66% - 4px); }
.l-flex.gap4.cols7 > .col,
.l-flex.gapx4.cols7 > .col {
width: calc(14.28% - 4px); }
.l-flex.gap4.cols8 > .col,
.l-flex.gapx4.cols8 > .col {
width: calc(12.5% - 4px); }
.l-flex.gap8 > .row,
.l-flex.gap8.cols2 > .col2,
.l-flex.gap8.cols3 > .col3,
.l-flex.gap8.cols4 > .col4,
.l-flex.gap8.cols5 > .col5,
.l-flex.gap8.cols6 > .col6,
.l-flex.gap8.cols7 > .col7,
.l-flex.gap8.cols8 > .col8,
.l-flex.gapx8 > .row,
.l-flex.gapx8.cols2 > .col2,
.l-flex.gapx8.cols3 > .col3,
.l-flex.gapx8.cols4 > .col4,
.l-flex.gapx8.cols5 > .col5,
.l-flex.gapx8.cols6 > .col6,
.l-flex.gapx8.cols7 > .col7,
.l-flex.gapx8.cols8 > .col8 {
width: calc(100% - 8px); }
.l-flex.gap8.cols8 > .col7,
.l-flex.gapx8.cols8 > .col7 {
width: calc(87.5% - 8px); }
.l-flex.gap8.cols7 > .col6,
.l-flex.gapx8.cols7 > .col6 {
width: calc(85.71% - 8px); }
.l-flex.gap8.cols6 > .col5,
.l-flex.gapx8.cols6 > .col5 {
width: calc(83.33% - 8px); }
.l-flex.gap8.cols5 > .col4,
.l-flex.gapx8.cols5 > .col4 {
width: calc(80% - 8px); }
.l-flex.gap8.cols4 > .col3,
.l-flex.gap8.cols8 > .col6,
.l-flex.gapx8.cols4 > .col3,
.l-flex.gapx8.cols8 > .col6 {
width: calc(75% - 8px); }
.l-flex.gap8.cols7 > .col5,
.l-flex.gapx8.cols7 > .col5{
width: calc(71.42% - 8px); }
.l-flex.gap8.cols3 > .col2,
.l-flex.gap8.cols6 > .col4,
.l-flex.gapx8.cols3 > .col2,
.l-flex.gapx8.cols6 > .col4 {
width: calc(66.66% - 8px); }
.l-flex.gap8.cols8 > .col5,
.l-flex.gapx8.cols8 > .col5 {
width: calc(62.5% - 8px); }
.l-flex.gap8.cols5 > .col3,
.l-flex.gapx8.cols5 > .col3 {
width: calc(60% - 8px); }
.l-flex.gap8.cols7 > .col4,
.l-flex.gapx8.cols7 > .col4 {
width: calc(57.14% - 8px); }
.l-flex.gap8.cols2 > .col,
.l-flex.gap8.cols4 > .col2,
.l-flex.gap8.cols6 > .col3,
.l-flex.gap8.cols8 > .col4,
.l-flex.gapx8.cols2 > .col,
.l-flex.gapx8.cols4 > .col2,
.l-flex.gapx8.cols6 > .col3,
.l-flex.gapx8.cols8 > .col4 {
width: calc(50% - 8px); }
.l-flex.gap8.cols7 > .col3,
.l-flex.gapx8.cols7 > .col3 {
width: calc(42.85% - 8px); }
.l-flex.gap8.cols5 > .col2,
.l-flex.gapx8.cols5 > .col2 {
width: calc(40% - 8px); }
.l-flex.gap8.cols8 > .col3,
.l-flex.gapx8.cols8 > .col3 {
width: calc(37.5% - 8px); }
.l-flex.gap8.cols3 > .col,
.l-flex.gap8.cols6 > .col2,
.l-flex.gapx8.cols3 > .col,
.l-flex.gapx8.cols6 > .col2 {
width: calc(33.33% - 8px); }
.l-flex.gap8.cols7 > .col2,
.l-flex.gapx8.cols7 > .col2 {
width: calc(28.57% - 8px); }
.l-flex.gap8.cols4 > .col,
.l-flex.gap8.cols8 > .col2,
.l-flex.gapx8.cols4 > .col,
.l-flex.gapx8.cols8 > .col2 {
width: calc(25% - 8px); }
.l-flex.gap8.cols5 > .col,
.l-flex.gapx8.cols5 > .col {
width: calc(20% - 8px); }
.l-flex.gap8.cols6 > .col,
.l-flex.gapx8.cols6 > .col {
width: calc(16.66% - 8px); }
.l-flex.gap8.cols7 > .col,
.l-flex.gapx8.cols7 > .col {
width: calc(14.28% - 8px); }
.l-flex.gap8.cols8 > .col,
.l-flex.gapx8.cols8 > .col {
width: calc(12.5% - 8px); }
.l-flex.gap16 > .row,
.l-flex.gap16.cols2 > .col2,
.l-flex.gap16.cols3 > .col3,
.l-flex.gap16.cols4 > .col4,
.l-flex.gap16.cols5 > .col5,
.l-flex.gap16.cols6 > .col6,
.l-flex.gap16.cols7 > .col7,
.l-flex.gap16.cols8 > .col8,
.l-flex.gapx16 > .row,
.l-flex.gapx16.cols2 > .col2,
.l-flex.gapx16.cols3 > .col3,
.l-flex.gapx16.cols4 > .col4,
.l-flex.gapx16.cols5 > .col5,
.l-flex.gapx16.cols6 > .col6,
.l-flex.gapx16.cols7 > .col7,
.l-flex.gapx16.cols8 > .col8 {
width: calc(100% - 16px); }
.l-flex.gap16.cols8 > .col7,
.l-flex.gapx16.cols8 > .col7 {
width: calc(87.5% - 16px); }
.l-flex.gap16.cols7 > .col6,
.l-flex.gapx16.cols7 > .col6 {
width: calc(85.71% - 16px); }
.l-flex.gap16.cols6 > .col5,
.l-flex.gapx16.cols6 > .col5 {
width: calc(83.33% - 16px); }
.l-flex.gap16.cols5 > .col4,
.l-flex.gapx16.cols5 > .col4 {
width: calc(80% - 16px); }
.l-flex.gap16.cols4 > .col3,
.l-flex.gap16.cols8 > .col6,
.l-flex.gapx16.cols4 > .col3,
.l-flex.gapx16.cols8 > .col6 {
width: calc(75% - 16px); }
.l-flex.gap16.cols7 > .col5,
.l-flex.gapx16.cols7 > .col5{
width: calc(71.42% - 16px); }
.l-flex.gap16.cols3 > .col2,
.l-flex.gap16.cols6 > .col4,
.l-flex.gapx16.cols3 > .col2,
.l-flex.gapx16.cols6 > .col4 {
width: calc(66.66% - 16px); }
.l-flex.gap16.cols8 > .col5,
.l-flex.gapx16.cols8 > .col5 {
width: calc(62.5% - 16px); }
.l-flex.gap16.cols5 > .col3,
.l-flex.gapx16.cols5 > .col3 {
width: calc(60% - 16px); }
.l-flex.gap16.cols7 > .col4,
.l-flex.gapx16.cols7 > .col4 {
width: calc(57.14% - 16px); }
.l-flex.gap16.cols2 > .col,
.l-flex.gap16.cols4 > .col2,
.l-flex.gap16.cols6 > .col3,
.l-flex.gap16.cols8 > .col4,
.l-flex.gapx16.cols2 > .col,
.l-flex.gapx16.cols4 > .col2,
.l-flex.gapx16.cols6 > .col3,
.l-flex.gapx16.cols8 > .col4 {
width: calc(50% - 16px); }
.l-flex.gap16.cols7 > .col3,
.l-flex.gapx16.cols7 > .col3 {
width: calc(42.85% - 16px); }
.l-flex.gap16.cols5 > .col2,
.l-flex.gapx16.cols5 > .col2 {
width: calc(40% - 16px); }
.l-flex.gap16.cols8 > .col3,
.l-flex.gapx16.cols8 > .col3 {
width: calc(37.5% - 16px); }
.l-flex.gap16.cols3 > .col,
.l-flex.gap16.cols6 > .col2,
.l-flex.gapx16.cols3 > .col,
.l-flex.gapx16.cols6 > .col2 {
width: calc(33.33% - 16px); }
.l-flex.gap16.cols7 > .col2,
.l-flex.gapx16.cols7 > .col2 {
width: calc(28.57% - 16px); }
.l-flex.gap16.cols4 > .col,
.l-flex.gap16.cols8 > .col2,
.l-flex.gapx16.cols4 > .col,
.l-flex.gapx16.cols8 > .col2 {
width: calc(25% - 16px); }
.l-flex.gap16.cols5 > .col,
.l-flex.gapx16.cols5 > .col {
width: calc(20% - 16px); }
.l-flex.gap16.cols6 > .col,
.l-flex.gapx16.cols6 > .col {
width: calc(16.66% - 16px); }
.l-flex.gap16.cols7 > .col,
.l-flex.gapx16.cols7 > .col {
width: calc(14.28% - 16px); }
.l-flex.gap16.cols8 > .col,
.l-flex.gapx16.cols8 > .col {
width: calc(12.5% - 16px); }
.l-flex.gap24 > .row,
.l-flex.gap24.cols2 > .col2,
.l-flex.gap24.cols3 > .col3,
.l-flex.gap24.cols4 > .col4,
.l-flex.gap24.cols5 > .col5,
.l-flex.gap24.cols6 > .col6,
.l-flex.gap24.cols7 > .col7,
.l-flex.gap24.cols8 > .col8,
.l-flex.gapx24 > .row,
.l-flex.gapx24.cols2 > .col2,
.l-flex.gapx24.cols3 > .col3,
.l-flex.gapx24.cols4 > .col4,
.l-flex.gapx24.cols5 > .col5,
.l-flex.gapx24.cols6 > .col6,
.l-flex.gapx24.cols7 > .col7,
.l-flex.gapx24.cols8 > .col8 {
width: calc(100% - 24px); }
.l-flex.gap24.cols8 > .col7,
.l-flex.gapx24.cols8 > .col7 {
width: calc(87.5% - 24px); }
.l-flex.gap24.cols7 > .col6,
.l-flex.gapx24.cols7 > .col6 {
width: calc(85.71% - 24px); }
.l-flex.gap24.cols6 > .col5,
.l-flex.gapx24.cols6 > .col5 {
width: calc(83.33% - 24px); }
.l-flex.gap24.cols5 > .col4,
.l-flex.gapx24.cols5 > .col4 {
width: calc(80% - 24px); }
.l-flex.gap24.cols4 > .col3,
.l-flex.gap24.cols8 > .col6,
.l-flex.gapx24.cols4 > .col3,
.l-flex.gapx24.cols8 > .col6 {
width: calc(75% - 24px); }
.l-flex.gap24.cols7 > .col5,
.l-flex.gapx24.cols7 > .col5{
width: calc(71.42% - 24px); }
.l-flex.gap24.cols3 > .col2,
.l-flex.gap24.cols6 > .col4,
.l-flex.gapx24.cols3 > .col2,
.l-flex.gapx24.cols6 > .col4 {
width: calc(66.66% - 24px); }
.l-flex.gap24.cols8 > .col5,
.l-flex.gapx24.cols8 > .col5 {
width: calc(62.5% - 24px); }
.l-flex.gap24.cols5 > .col3,
.l-flex.gapx24.cols5 > .col3 {
width: calc(60% - 24px); }
.l-flex.gap24.cols7 > .col4,
.l-flex.gapx24.cols7 > .col4 {
width: calc(57.14% - 24px); }
.l-flex.gap24.cols2 > .col,
.l-flex.gap24.cols4 > .col2,
.l-flex.gap24.cols6 > .col3,
.l-flex.gap24.cols8 > .col4,
.l-flex.gapx24.cols2 > .col,
.l-flex.gapx24.cols4 > .col2,
.l-flex.gapx24.cols6 > .col3,
.l-flex.gapx24.cols8 > .col4 {
width: calc(50% - 24px); }
.l-flex.gap24.cols7 > .col3,
.l-flex.gapx24.cols7 > .col3 {
width: calc(42.85% - 24px); }
.l-flex.gap24.cols5 > .col2,
.l-flex.gapx24.cols5 > .col2 {
width: calc(40% - 24px); }
.l-flex.gap24.cols8 > .col3,
.l-flex.gapx24.cols8 > .col3 {
width: calc(37.5% - 24px); }
.l-flex.gap24.cols3 > .col,
.l-flex.gap24.cols6 > .col2,
.l-flex.gapx24.cols3 > .col,
.l-flex.gapx24.cols6 > .col2 {
width: calc(33.33% - 24px); }
.l-flex.gap24.cols7 > .col2,
.l-flex.gapx24.cols7 > .col2 {
width: calc(28.57% - 24px); }
.l-flex.gap24.cols4 > .col,
.l-flex.gap24.cols8 > .col2,
.l-flex.gapx24.cols4 > .col,
.l-flex.gapx24.cols8 > .col2 {
width: calc(25% - 24px); }
.l-flex.gap24.cols5 > .col,
.l-flex.gapx24.cols5 > .col {
width: calc(20% - 24px); }
.l-flex.gap24.cols6 > .col,
.l-flex.gapx24.cols6 > .col {
width: calc(16.66% - 24px); }
.l-flex.gap24.cols7 > .col,
.l-flex.gapx24.cols7 > .col {
width: calc(14.28% - 24px); }
.l-flex.gap24.cols8 > .col,
.l-flex.gapx24.cols8 > .col {
width: calc(12.5% - 24px); }
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
<style>
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP Regular"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
font-family: 'Noto Sans JP', sans-serif;
}
/* utility */
.u-mgt8 {
margin-top: 8px;
}
.u-ml {
margin-left: auto;
}
.u-mgl-auto {
margin-left: auto;
}
.u-mgr-auto {
margin-right: auto;
}
.u-mgx-auto {
margin-right: auto;
margin-left: auto;
}
.u-mgt-auto {
margin-top: auto;
}
/* sample +++++++++++++++++++ */
.example,
.sample {
max-width: 808px;
width: 80%;
margin: 24px auto;
}
.l-flex {
padding: 0;
outline: 1px dashed rgba(0,0,0,0.2);
list-style: none;
}
.sample .l-flex + .l-flex {
margin-top: 16px;
}
.l-flex .row,
.l-flex [class^=col] {
background-color: rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
}
.sample .l-flex .row,
.sample .l-flex [class^=col] {
padding: 8px;
}
.example [class^=col] {
line-height: 32px;
}
.example pre {
overflow: auto;
padding: 16px;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #f6f6f6;
font-size: 13px;
}
</style>
<link rel="stylesheet" href="l-flex.css">
</head>
<body>
<div class="example">
<h1>flexbox grid system</h1>
<div class="l-flex cols4 gap8">
<div class="col">.col</div>
<div class="col3">.col3</div>
<div class="col2">.col2</div>
<div class="col2">.col2</div>
<div class="col4">.col4</div>
<div class="col">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum</div>
<div class="col">
<div class="l-flex cols3 gap8">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
<div class="col fit">
<div class="l-flex cols3 gap8">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
<div class="col fit">
<div class="l-flex cols3 gap8">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
<div class="col">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum</div>
<div class="col">
<div class="l-flex rows gap8">
<div class="row">.row</div>
<div class="row">.row</div>
<div class="row">.row</div>
</div>
</div>
<div class="col fit">
<div class="l-flex rows gap8">
<div class="row">.row</div>
<div class="row grow">.row.grow</div>
<div class="row">.row</div>
</div>
</div>
<div class="col fit">
<div class="l-flex rows gap8">
<div class="row">.row</div>
<div class="row grow fit">
<div class="l-flex cols2 gap8">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
<div class="row">.row</div>
</div>
</div>
</div>
</div>
<div class="sample">
<h2>basic</h2>
<p>.l-flex</p>
<ul class="l-flex">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<ul class="l-flex">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col grow">.col.grow</li>
</ul>
<p>.l-flex.fit</p>
<ul class="l-flex fit">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.end</p>
<ul class="l-flex end">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.center</p>
<ul class="l-flex center">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.between</p>
<ul class="l-flex between">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex (col margin)</p>
<ul class="l-flex">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col u-mgl-auto">.col.u-mgl-auto</li>
</ul>
<ul class="l-flex">
<li class="col u-mgr-auto">.col.u-mgr-auto</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<ul class="l-flex">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col u-mgx-auto">.col.u-mgx-auto</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<h2>columns</h2>
<p>.l-flex.cols2</p>
<ul class="l-flex cols2">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col2">.col2</li>
</ul>
<p>.l-flex.cols3</p>
<ul class="l-flex cols3">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col2">.col2</li>
<li class="col3">.col3</li>
</ul>
<p>.l-flex.cols4</p>
<ul class="l-flex cols4">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col3">.col3</li>
<li class="col2">.col2</li>
<li class="col2">.col2</li>
<li class="col4">.col4</li>
</ul>
<p>.l-flex.cols5</p>
<ul class="l-flex cols5">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col4">.col4</li>
<li class="col2">.col2</li>
<li class="col3">.col3</li>
<li class="col5">.col5</li>
</ul>
<p>.l-flex.cols6</p>
<ul class="l-flex cols6">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col5">.col5</li>
<li class="col2">.col2</li>
<li class="col4">.col4</li>
<li class="col3">.col3</li>
<li class="col3">.col3</li>
<li class="col6">.col6</li>
</ul>
<p>.l-flex.cols7</p>
<ul class="l-flex cols7">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col6">.col6</li>
<li class="col2">.col2</li>
<li class="col5">.col5</li>
<li class="col3">.col3</li>
<li class="col4">.col4</li>
<li class="col7">.col7</li>
</ul>
<p>.l-flex.cols8</p>
<ul class="l-flex cols8">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col7">.col7</li>
<li class="col2">.col2</li>
<li class="col6">.col6</li>
<li class="col3">.col3</li>
<li class="col5">.col5</li>
<li class="col4">.col4</li>
<li class="col4">.col4</li>
<li class="col8">.col8</li>
</ul>
<h2>gaps (gutters)</h2>
<p>.l-flex.gap4</p>
<ul class="l-flex gap4">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gap8</p>
<ul class="l-flex gap8">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gap16</p>
<ul class="l-flex gap16">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gap24</p>
<ul class="l-flex gap24">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapx4</p>
<ul class="l-flex gapx4">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapx8</p>
<ul class="l-flex gapx8">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapx16</p>
<ul class="l-flex gapx16">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapx24</p>
<ul class="l-flex gapx24">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapy4</p>
<ul class="l-flex gapy4">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapy8</p>
<ul class="l-flex gapy8">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapy16</p>
<ul class="l-flex gapy16">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.gapy24</p>
<ul class="l-flex gapy24">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<h2>columns：has height container</h2>
<p>.l-flex</p>
<ul class="l-flex" style="height:120px;">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.top</p>
<ul class="l-flex top" style="height:120px;">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.middle</p>
<ul class="l-flex middle" style="height:120px;">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex.bottom</p>
<ul class="l-flex bottom" style="height:120px;">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
<li class="col">.col</li>
</ul>
<p>.l-flex (align-self)</p>
<ul class="l-flex" style="height:120px;">
<li class="col">.col</li>
<li class="col top">.col.top</li>
<li class="col center">.col.center</li>
<li class="col bottom">.col.bottom</li>
<li class="col baseline">.col.baseline</li>
</ul>
<h2>rows</h2>
<p>.l-flex.rows</p>
<ul class="l-flex rows">
<li class="col">.col</li>
<li class="col">.col</li>
<li class="row">.row</li>
</ul>
<h2>rows：has height container</h2>
<p>.l-flex.rows</p>
<ul class="l-flex rows" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row">.row</li>
</ul>
<ul class="l-flex rows" style="height:160px;">
<li class="row">.row</li>
<li class="row grow">.row.grow</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.rows.fit</p>
<ul class="l-flex rows fit" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.rows.middle</p>
<ul class="l-flex rows middle" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.rows.bottom</p>
<ul class="l-flex rows bottom" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.rows.between</p>
<ul class="l-flex rows between" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row">.row</li>
</ul>
<p>.l-flex.rows (row with margin)</p>
<ul class="l-flex rows" style="height:160px;">
<li class="row">.row</li>
<li class="row">.row</li>
<li class="row u-mgt-auto">.row.u-mgt-auto</li>
</ul>
<h2>nested</h2>
</div>
</body>
</html>
追記
css
@charrset "utf-8";
/* flexbox grid system +++++++++++++++++++ */
/* container */
.l-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: stretch;
}
.l-flex.rows { flex-direction: column;}
.l-flex:not(.rows).top { align-content: flex-start; align-items: flex-start;}
.l-flex:not(.rows).middle { align-content: center; align-items: center;}
.l-flex:not(.rows).bottom { align-content: flex-end; align-items: flex-end;}
.l-flex:not(.rows).end { justify-content: flex-end;}
.l-flex:not(.rows).center { justify-content: center;}
.l-flex.between { justify-content: space-between;}
.l-flex.rows.middle { justify-content: center;}
.l-flex.rows.bottom { justify-content: flex-end;}
/* items */
.l-flex.fit > .col,
.l-flex.fit > .col2,
.l-flex.fit > .col3,
.l-flex.fit > .col4,
.l-flex.fit > .col5,
.l-flex.fit > .col6,
.l-flex.fit > .col7,
.l-flex.fit > .col8,
.l-flex.fit > .col9,
.l-flex.fit > .col10,
.l-flex.fit > .col11,
.l-flex.fit > .row,
.l-flex[class*=cols] > .col,
.l-flex[class*=cols] > .col2,
.l-flex[class*=cols] > .col3,
.l-flex[class*=cols] > .col4,
.l-flex[class*=cols] > .col5,
.l-flex[class*=cols] > .col6,
.l-flex[class*=cols] > .col7,
.l-flex[class*=cols] > .col8,
.l-flex[class*=cols] > .col9,
.l-flex[class*=cols] > .col10,
.l-flex[class*=cols] > .col11,
.l-flex[class*=cols] > .row {
flex-grow: 1;}
.l-flex > .top { align-self: flex-start;}
.l-flex > .bottom { align-self: flex-end;}
.l-flex > .center { align-self: center;}
.l-flex > .baseline { align-self: baseline;}
.l-flex > .grow { flex-grow: 1;}
.l-flex > .fit { display: flex; align-items: stretch;}
.l-flex > .fit > .l-flex { flex-grow: 1;}
.l-flex > .order0 { order: 0;}
.l-flex > .order1 { order: 1;}
.l-flex > .order2 { order: 2;}
.l-flex > .order3 { order: 3;}
.l-flex > .order4 { order: 4;}
.l-flex > .order5 { order: 5;}
.l-flex > .order6 { order: 6;}
.l-flex > .order7 { order: 7;}
.l-flex > .order8 { order: 8;}
/* gap */
.l-flex.gap4 { margin-top: -4px; margin-left: -4px;}
.l-flex.gap8 { margin-top: -8px; margin-left: -8px;}
.l-flex.gap16 { margin-top: -16px; margin-left: -16px;}
.l-flex.gap24 { margin-top: -24px; margin-left: -24px;}
.l-flex.gap32 { margin-top: -32px; margin-left: -32px;}
.l-flex.gapy0 { margin-top: 0px;}
.l-flex.gapy4 { margin-top: -4px;}
.l-flex.gapy8 { margin-top: -8px;}
.l-flex.gapy16 { margin-top: -16px;}
.l-flex.gapy24 { margin-top: -24px;}
.l-flex.gapy32 { margin-top: -32px;}
.l-flex.gap4 > .row,
.l-flex.gap4 > .col,
.l-flex.gap4 > .col2,
.l-flex.gap4 > .col3,
.l-flex.gap4 > .col4,
.l-flex.gap4 > .col5,
.l-flex.gap4 > .col6,
.l-flex.gap4 > .col7,
.l-flex.gap4 > .col8,
.l-flex.gap4 > .col9,
.l-flex.gap4 > .col10,
.l-flex.gap4 > .col11 {
margin-top: 4px; margin-left: 4px;}
.l-flex.gap8 > .row,
.l-flex.gap8 > .col,
.l-flex.gap8 > .col2,
.l-flex.gap8 > .col3,
.l-flex.gap8 > .col4,
.l-flex.gap8 > .col5,
.l-flex.gap8 > .col6,
.l-flex.gap8 > .col7,
.l-flex.gap8 > .col8,
.l-flex.gap8 > .col9,
.l-flex.gap8 > .col10,
.l-flex.gap8 > .col11 {
margin-top: 8px; margin-left: 8px;}
.l-flex.gap16 > .row,
.l-flex.gap16 > .col,
.l-flex.gap16 > .col2,
.l-flex.gap16 > .col3,
.l-flex.gap16 > .col4,
.l-flex.gap16 > .col5,
.l-flex.gap16 > .col6,
.l-flex.gap16 > .col7,
.l-flex.gap16 > .col8,
.l-flex.gap16 > .col9,
.l-flex.gap16 > .col10,
.l-flex.gap16 > .col11 {
margin-top: 16px; margin-left: 16px;}
.l-flex.gap24 > .row,
.l-flex.gap24 > .col,
.l-flex.gap24 > .col2,
.l-flex.gap24 > .col3,
.l-flex.gap24 > .col4,
.l-flex.gap24 > .col5,
.l-flex.gap24 > .col6,
.l-flex.gap24 > .col7,
.l-flex.gap24 > .col8,
.l-flex.gap24 > .col9,
.l-flex.gap24 > .col10,
.l-flex.gap24 > .col11 {
margin-top: 24px; margin-left: 24px;}
.l-flex.gap32 > .row,
.l-flex.gap32 > .col,
.l-flex.gap32 > .col2,
.l-flex.gap32 > .col3,
.l-flex.gap32 > .col4,
.l-flex.gap32 > .col5,
.l-flex.gap32 > .col6,
.l-flex.gap32 > .col7,
.l-flex.gap32 > .col8,
.l-flex.gap32 > .col9,
.l-flex.gap32 > .col10,
.l-flex.gap32 > .col11 {
margin-top: 32px; margin-left: 32px;}
.l-flex.gapy0 > .row,
.l-flex.gapy0 > .col,
.l-flex.gapy0 > .col2,
.l-flex.gapy0 > .col3,
.l-flex.gapy0 > .col4,
.l-flex.gapy0 > .col5,
.l-flex.gapy0 > .col6,
.l-flex.gapy0 > .col7,
.l-flex.gapy0 > .col8,
.l-flex.gapy0 > .col9,
.l-flex.gapy0 > .col10,
.l-flex.gapy0 > .col11 {
margin-top: 0px;}
.l-flex.gapy4 > .row,
.l-flex.gapy4 > .col,
.l-flex.gapy4 > .col2,
.l-flex.gapy4 > .col3,
.l-flex.gapy4 > .col4,
.l-flex.gapy4 > .col5,
.l-flex.gapy4 > .col6,
.l-flex.gapy4 > .col7,
.l-flex.gapy4 > .col8,
.l-flex.gapy4 > .col9,
.l-flex.gapy4 > .col10,
.l-flex.gapy4 > .col11 {
margin-top: 4px;}
.l-flex.gapy8 > .row,
.l-flex.gapy8 > .col,
.l-flex.gapy8 > .col2,
.l-flex.gapy8 > .col3,
.l-flex.gapy8 > .col4,
.l-flex.gapy8 > .col5,
.l-flex.gapy8 > .col6,
.l-flex.gapy8 > .col7,
.l-flex.gapy8 > .col8,
.l-flex.gapy8 > .col9,
.l-flex.gapy8 > .col10,
.l-flex.gapy8 > .col11 {
margin-top: 8px;}
.l-flex.gapy16 > .row,
.l-flex.gapy16 > .col,
.l-flex.gapy16 > .col2,
.l-flex.gapy16 > .col3,
.l-flex.gapy16 > .col4,
.l-flex.gapy16 > .col5,
.l-flex.gapy16 > .col6,
.l-flex.gapy16 > .col7,
.l-flex.gapy16 > .col8,
.l-flex.gapy16 > .col9,
.l-flex.gapy16 > .col10,
.l-flex.gapy16 > .col11 {
margin-top: 16px;}
.l-flex.gapy24 > .row,
.l-flex.gapy24 > .col,
.l-flex.gapy24 > .col2,
.l-flex.gapy24 > .col3,
.l-flex.gapy24 > .col4,
.l-flex.gapy24 > .col5,
.l-flex.gapy24 > .col6,
.l-flex.gapy24 > .col7,
.l-flex.gapy24 > .col8,
.l-flex.gapy24 > .col9,
.l-flex.gapy24 > .col10,
.l-flex.gapy24 > .col11 {
margin-top: 24px;}
.l-flex.gapy32 > .row,
.l-flex.gapy32 > .col,
.l-flex.gapy32 > .col2,
.l-flex.gapy32 > .col3,
.l-flex.gapy32 > .col4,
.l-flex.gapy32 > .col5,
.l-flex.gapy32 > .col6,
.l-flex.gapy32 > .col7,
.l-flex.gapy32 > .col8,
.l-flex.gapy32 > .col9,
.l-flex.gapy32 > .col10,
.l-flex.gapy32 > .col11 {
margin-top: 32px;}
/* width */
.l-flex.cols12 > .col { width: 8.33%;}
.l-flex.cols10 > .col { width: 10%;}
.l-flex.cols12 > .col2 { width: 16.66%;}
.l-flex.cols10 > .col2 { width: 20%;}
.l-flex.cols12 > .col3 { width: 25%;}
.l-flex.cols10 > .col3 { width: 30%;}
.l-flex.cols12 > .col4 { width: 33.33%;}
.l-flex.cols10 > .col4 { width: 40%;}
.l-flex.cols12 > .col5 { width: 41.66%;}
.l-flex.cols10 > .col5,
.l-flex.cols12 > .col6 { width: 50%;}
.l-flex.cols12 > .col7 { width: 58.33%;}
.l-flex.cols10 > .col6 { width: 60%;}
.l-flex.cols12 > .col8 { width: 66.66%;}
.l-flex.cols10 > .col7 { width: 70%;}
.l-flex.cols12 > .col9 { width: 75%;}
.l-flex.cols10 > .col8 { width: 80%;}
.l-flex.cols12 > .col10 { width: 83.33%;}
.l-flex.cols10 > .col9 { width: 90%;}
.l-flex.cols12 > .col11 { width: 91.66%;}
.l-flex > .row { width: 100%;}
.l-flex.gap4.cols12 > .col { width: calc(8.33% - 4px);}
.l-flex.gap4.cols10 > .col { width: calc(10% - 4px);}
.l-flex.gap4.cols12 > .col2 { width: calc(16.66% - 4px);}
.l-flex.gap4.cols10 > .col2 { width: calc(20% - 4px);}
.l-flex.gap4.cols12 > .col3 { width: calc(25% - 4px);}
.l-flex.gap4.cols10 > .col3 { width: calc(30% - 4px);}
.l-flex.gap4.cols12 > .col4 { width: calc(33.33% - 4px);}
.l-flex.gap4.cols10 > .col4 { width: calc(40% - 4px);}
.l-flex.gap4.cols12 > .col5 { width: calc(41.66% - 4px);}
.l-flex.gap4.cols10 > .col5,
.l-flex.gap4.cols12 > .col6 { width: calc(50% - 4px);}
.l-flex.gap4.cols12 > .col7 { width: calc(58.33% - 4px);}
.l-flex.gap4.cols10 > .col6 { width: calc(60% - 4px);}
.l-flex.gap4.cols12 > .col8 { width: calc(66.66% - 4px);}
.l-flex.gap4.cols10 > .col7 { width: calc(70% - 4px);}
.l-flex.gap4.cols12 > .col9 { width: calc(75% - 4px);}
.l-flex.gap4.cols10 > .col8 { width: calc(80% - 4px);}
.l-flex.gap4.cols12 > .col10 { width: calc(83.33% - 4px);}
.l-flex.gap4.cols10 > .col9 { width: calc(90% - 4px);}
.l-flex.gap4.cols12 > .col11 { width: calc(91.66% - 4px);}
.l-flex.gap4 > .row { width: calc(100% - 4px);}
.l-flex.gap8.cols12 > .col { width: calc(8.33% - 8px);}
.l-flex.gap8.cols10 > .col { width: calc(10% - 8px);}
.l-flex.gap8.cols12 > .col2 { width: calc(16.66% - 8px);}
.l-flex.gap8.cols10 > .col2 { width: calc(20% - 8px);}
.l-flex.gap8.cols12 > .col3 { width: calc(25% - 8px);}
.l-flex.gap8.cols10 > .col3 { width: calc(30% - 8px);}
.l-flex.gap8.cols12 > .col4 { width: calc(33.33% - 8px);}
.l-flex.gap8.cols10 > .col4 { width: calc(40% - 8px);}
.l-flex.gap8.cols12 > .col5 { width: calc(41.66% - 8px);}
.l-flex.gap8.cols10 > .col5,
.l-flex.gap8.cols12 > .col6 { width: calc(50% - 8px);}
.l-flex.gap8.cols12 > .col7 { width: calc(58.33% - 8px);}
.l-flex.gap8.cols10 > .col6 { width: calc(60% - 8px);}
.l-flex.gap8.cols12 > .col8 { width: calc(66.66% - 8px);}
.l-flex.gap8.cols10 > .col7 { width: calc(70% - 8px);}
.l-flex.gap8.cols12 > .col9 { width: calc(75% - 8px);}
.l-flex.gap8.cols10 > .col8 { width: calc(80% - 8px);}
.l-flex.gap8.cols12 > .col10 { width: calc(83.33% - 8px);}
.l-flex.gap8.cols10 > .col9 { width: calc(90% - 8px);}
.l-flex.gap8.cols12 > .col11 { width: calc(91.66% - 8px);}
.l-flex.gap8 > .row { width: calc(100% - 8px);}
.l-flex.gap16.cols12 > .col { width: calc(8.33% - 16px);}
.l-flex.gap16.cols10 > .col { width: calc(10% - 16px);}
.l-flex.gap16.cols12 > .col2 { width: calc(16.66% - 16px);}
.l-flex.gap16.cols10 > .col2 { width: calc(20% - 16px);}
.l-flex.gap16.cols12 > .col3 { width: calc(25% - 16px);}
.l-flex.gap16.cols10 > .col3 { width: calc(30% - 16px);}
.l-flex.gap16.cols12 > .col4 { width: calc(33.33% - 16px);}
.l-flex.gap16.cols10 > .col4 { width: calc(40% - 16px);}
.l-flex.gap16.cols12 > .col5 { width: calc(41.66% - 16px);}
.l-flex.gap16.cols10 > .col5,
.l-flex.gap16.cols12 > .col6 { width: calc(50% - 16px);}
.l-flex.gap16.cols12 > .col7 { width: calc(58.33% - 16px);}
.l-flex.gap16.cols10 > .col6 { width: calc(60% - 16px);}
.l-flex.gap16.cols12 > .col8 { width: calc(66.66% - 16px);}
.l-flex.gap16.cols10 > .col7 { width: calc(70% - 16px);}
.l-flex.gap16.cols12 > .col9 { width: calc(75% - 16px);}
.l-flex.gap16.cols10 > .col8 { width: calc(80% - 16px);}
.l-flex.gap16.cols12 > .col10 { width: calc(83.33% - 16px);}
.l-flex.gap16.cols10 > .col9 { width: calc(90% - 16px);}
.l-flex.gap16.cols12 > .col11 { width: calc(91.66% - 16px);}
.l-flex.gap16 > .row { width: calc(100% - 16px);}
.l-flex.gap24.cols12 > .col { width: calc(8.33% - 24px);}
.l-flex.gap24.cols10 > .col { width: calc(10% - 24px);}
.l-flex.gap24.cols12 > .col2 { width: calc(16.66% - 24px);}
.l-flex.gap24.cols10 > .col2 { width: calc(20% - 24px);}
.l-flex.gap24.cols12 > .col3 { width: calc(25% - 24px);}
.l-flex.gap24.cols10 > .col3 { width: calc(30% - 24px);}
.l-flex.gap24.cols12 > .col4 { width: calc(33.33% - 24px);}
.l-flex.gap24.cols10 > .col4 { width: calc(40% - 24px);}
.l-flex.gap24.cols12 > .col5 { width: calc(41.66% - 24px);}
.l-flex.gap24.cols10 > .col5,
.l-flex.gap24.cols12 > .col6 { width: calc(50% - 24px);}
.l-flex.gap24.cols12 > .col7 { width: calc(58.33% - 24px);}
.l-flex.gap24.cols10 > .col6 { width: calc(60% - 24px);}
.l-flex.gap24.cols12 > .col8 { width: calc(66.66% - 24px);}
.l-flex.gap24.cols10 > .col7 { width: calc(70% - 24px);}
.l-flex.gap24.cols12 > .col9 { width: calc(75% - 24px);}
.l-flex.gap24.cols10 > .col8 { width: calc(80% - 24px);}
.l-flex.gap24.cols12 > .col10 { width: calc(83.33% - 24px);}
.l-flex.gap24.cols10 > .col9 { width: calc(90% - 24px);}
.l-flex.gap24.cols12 > .col11 { width: calc(91.66% - 24px);}
.l-flex.gap24 > .row { width: calc(100% - 24px);}
.l-flex.gap32.cols12 > .col { width: calc(8.33% - 32px);}
.l-flex.gap32.cols10 > .col { width: calc(10% - 32px);}
.l-flex.gap32.cols12 > .col2 { width: calc(16.66% - 32px);}
.l-flex.gap32.cols10 > .col2 { width: calc(20% - 32px);}
.l-flex.gap32.cols12 > .col3 { width: calc(25% - 32px);}
.l-flex.gap32.cols10 > .col3 { width: calc(30% - 32px);}
.l-flex.gap32.cols12 > .col4 { width: calc(33.33% - 32px);}
.l-flex.gap32.cols10 > .col4 { width: calc(40% - 32px);}
.l-flex.gap32.cols12 > .col5 { width: calc(41.66% - 32px);}
.l-flex.gap32.cols10 > .col5,
.l-flex.gap32.cols12 > .col6 { width: calc(50% - 32px);}
.l-flex.gap32.cols12 > .col7 { width: calc(58.33% - 32px);}
.l-flex.gap32.cols10 > .col6 { width: calc(60% - 32px);}
.l-flex.gap32.cols12 > .col8 { width: calc(66.66% - 32px);}
.l-flex.gap32.cols10 > .col7 { width: calc(70% - 32px);}
.l-flex.gap32.cols12 > .col9 { width: calc(75% - 32px);}
.l-flex.gap32.cols10 > .col8 { width: calc(80% - 32px);}
.l-flex.gap32.cols12 > .col10 { width: calc(83.33% - 32px);}
.l-flex.gap32.cols10 > .col9 { width: calc(90% - 32px);}
.l-flex.gap32.cols12 > .col11 { width: calc(91.66% - 32px);}
.l-flex.gap32 > .row { width: calc(100% - 32px);}
以上、ありがとうございました。