Components Module For Flexbox Layout.

sircus-components-flex | v2.0.1

Base

01
02
03
04
05
06
07
08
09
10
16
17
18
19
20
21
32
33
34
35
36
37
38
39
40
41
42
43
<div class="Flex t-gutterReset">
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
</div>

Responsive

01
02
03
04
05
06
07
08
09
10
11
12
<div class="Flex t-sm-flex t-gutterReset">
  <div class="Flex-col t-sm-widthHalf t-md-width4of12 t-lg-width2of12">...</div>
  <div class="Flex-col t-sm-widthHalf t-md-width4of12 t-lg-width2of12">...</div>
  <div class="Flex-col t-sm-widthHalf t-md-width4of12 t-lg-width2of12">...</div>
</div>

Modifier: .Flex--center

01
02
03
04
05
<div class="Flex Flex--center t-flex t-gutterReset">
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
</div>

Modifier: .Flex--right

01
02
03
04
05
<div class="Flex Flex--right t-flex t-gutterReset">
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
  <div class="Flex-col t-width4of12">...</div>
</div>

Modifier: .Flex--justify

01
02
03
04
05
06
<div class="Flex Flex--justify t-flex t-gutterReset">
  <div class="Flex-col">...</div>
  <div class="Flex-col">...</div>
  <div class="Flex-col">...</div>
</div>

Modifier: .Flex--middle

01
02
03
04
05
06
<div class="Flex Flex--middle t-flex t-gutterReset">
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
</div>

Modifier: .Flex--baseline

01
02
03
04
05
06
<div class="Flex Flex--baseline t-flex t-gutterReset">
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
</div>

Modifier: .Flex--bottom

01
02
03
04
05
06
<div class="Flex Flex--bottom t-gutterReset">
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
  <div class="Flex-col t-width3of12">...</div>
</div>

Modifier: .Flex-col--fit

01: width:200px
02
<div class="Flex t-flex t-gutterReset">
  <div class="Flex-col">width:200px</div>
  <div class="Flex-col Flex-col--fit">...</div>
</div>

Modifier: .Flex-col--first

01: width:200px
02
03: fit
<div class="Flex t-flex t-gutterReset">
  <div class="Flex-col">width:200px</div>
  <div class="Flex-col Flex-col--fit">...</div>
</div>

Modifier: .Flex-col--last

01: width:200px
02
03: fit
<div class="Flex t-flex t-gutterReset">
  <div class="Flex-col Flex-col--last">width:200px</div>
  <div class="Flex-col Flex-col--fit">...</div>
</div>

Install

npm install sircus-components-flex sircus-variables sircus-tools-display sircus-tools-width

CSS import

@import "sircus-components-flex";
@import "sircus-tools-display";
@import "sircus-tools-display/responsive";
@import "sircus-tools-width";
@import "sircus-tools-width/responsive";
@import "sircus-variables";

CSS

:root {
  --Flex-gutter: var(--gutter);
}

/*　sircus-components-flex
======================================== */
.Flex {
  display: flex;
  flex-wrap: wrap;
}

.Flex--nowrap       { flex-wrap: nowrap; }

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

.Flex--top          { align-items: flex-start; }
.Flex--middle       { align-items: center; }
.Flex--bottom       { align-items: flex-end; }
.Flex--baseline     { align-items: baseline; }


.Flex-col {
  box-sizing: border-box;
  padding-right: var(--Flex-gutter);
  padding-left: var(--Flex-gutter);
}

.Flex-col--fit   { flex: 1 1 0%; }
.Flex-col--first { order: -1 }
.Flex-col--last  { order: 9999 }

sircus-tools-display

/*
 * sircus-tools-display
 ================================================== */
.t-none        { display: none !important; }
.t-block       { display: block !important; }
.t-flex        { display: flex !important; }
.t-inlineBlock { display: inline-block !important; }
.t-inline      { display: inline !important; }
.t-table       { display: table !important; }
.t-tableCell   { display: table-cell !important; }

sircus-tools-width

/*
 * sircus-tools-width
 ================================================== */
.t-width1of12  { width: calc((1 / 12) * 100)% !important; }
.t-width2of12  { width: calc((2 / 12) * 100)% !important; }
.t-width3of12  { width: calc((3 / 12) * 100)% !important; }
.t-width4of12  { width: calc((4 / 12) * 100)% !important; }
.t-width5of12  { width: calc((5 / 12) * 100)% !important; }
.t-width6of12,
.t-widthHalf   { width: calc((6 / 12) * 100)% !important; }
.t-width7of12  { width: calc((7 / 12) * 100)% !important; }
.t-width8of12  { width: calc((8 / 12) * 100)% !important; }
.t-width9of12  { width: calc((9 / 12) * 100)% !important; }
.t-width10of12 { width: calc((10 / 12) * 100)% !important; }
.t-width11of12 { width: calc((11 / 12) * 100)% !important; }
.t-width12of12,
.t-widthFull   { width: calc((12 / 12) * 100)% !important; }