Flexbox

CSS Flexbox opens a lot of possibility for items positionning. As a project base, this boilerplate provides only the most common (Opinionated :) properties. You can always extend it by custom classes if needed.

SailorCSS ^2.0 provides some SASS placeholders for Flexbox properties. Placeholders are great to keep a Object-oriented CSS codebase without repeating code.

Config values

config.scss

// class name : property
$s-flex-direction: (
  'direction-row': row,
  'direction-column': column,
  'direction-row-reverse': row-reverse,
  'direction-column-reverse': column-reverse,
),


$s-justify-content: (
  'justify-content-start': flex-start,
  'justify-content-end': flex-end,
  'justify-content-center': center,
  'justify-content-between': space-between,
  'justify-content-around': space-around,
),


$s-align-items: (
  'align-items-start': flex-start,
  'align-items-end': flex-end,
  'align-items-center': center,
  'align-items-stretch': stretch,
),

Flex direction

d-flex
1
2
3
d-flex + direction-row-reverse
1
2
3
d-flex + direction-column
1
2
3
d-flex + direction-column-reverse
1
2
3

Justify Content

d-flex + justify-content-start
1
2
d-flex + justify-content-end
1
2
d-flex + justify-content-center
1
2
d-flex + justify-content-between
1
2
d-flex + justify-content-around
1
2

Changing the cross axis for column

When changing the cross axis for direction-column or direction-column-reverse, the justify-content property aligns the content vertically.

d-flex + direction-column + justify-content-center
1
2

Align Items

d-flex + align-items-start
1
2
3
d-flex + align-items-end
1
2
3
d-flex + align-items-center
1
2
3
d-flex + align-items-stretch
1
2
3

Changing the cross axis for column

When changing the cross axis for direction-column or direction-column-reverse, the align-items property aligns the items horizontally

d-flex + direction-column + align-items-center
1
2
3