Flexible Box Layout Module utility (stylus)

gistfile1.txt

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// _flex.styl
//
// Flexible Box Layout Module  
// W3C Working Draft, 23 July 2009. stylus & BEMver  
//
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

// Flex
//
// 要素をFlexコンテナ化する。  
// `.flex-orient_vl` が付いていない場合は  
// `box-pack:center` かつ `box-align:center`がデフォルトになる。
// 
// Markup:
// <div class="flex" style="height:100px">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
//
// Styleguide 2.1

.flex
  display -webkit-box
  
  &:not(.flex-orient_vl)
    box-pack(center)
    box-align(center)
  

// flex-orient
// 
// 指定したFlexコンテナー内にあるFlexアイテムのレイアウト方向を設定する。  
// 勧告候補のflex-directionと同じ働き。  
//
// `.flex-orient_horizontal` → box-orient:horizontal  
// `.flex-orient_vertical` → box-orient:vertical  
//
// Markup:
// <div class="flex flex-orient_vl" style="height:200px">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
// 
// Styleguide 2.1.1

.flex
  
  &.flex-orient_hl
    box-orient(horizontal)
  
  &.flex-orient_vl
    box-orient(vertical)
  

// flex-pack
// 
// FlexアイテムをFlexコンテナの主軸に沿って整列する。  
// 勧告候補のjustify-contentと同じ働き。  
//
// `.flex-pack_end` → box-pack:end  
// `.flex-pack_start` → box-pack:start  
// `.flex-pack_justify` → box-pack:justify
//
// Markup:
// <div class="flex flex-pack_justify">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
//
// Styleguide 2.1.2

.flex
  
  &.flex-pack_end
    box-pack(end)
  
  &.flex-pack_start
    box-pack(start)
  
  &.flex-pack_justify
    box-pack(justify)
  

// flex-align
// 
// FlexアイテムをFlexコンテナの交差軸に沿って整列する。  
// 勧告候補のalign-itemsと同じ働き。  
//
// `.flex-align_end` → box-align:end  
// `.flex-align_start` → box-align:start  
// `.flex-align_stretch` → box-align:stretch
//
// Markup:
// <div class="flex flex-align_stretch flex-orient_vl" style="height:200px">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
// 
// Styleguide 2.1.3

.flex
  
  &.flex-align_start
    box-align(start)
  
  &.flex-align_end
    box-align(end)
  
  &.flex-align_stretch 
    box-align(stretch)
  

// flex-direction
// 
// Flexアイテムのレイアウト方向を逆転させる
// 勧告候補のflex-directionでreverse指定したのと同じ働き。  
//
// `.flex-dir-reverse` → box-direction:reverse  
//
// Markup:
// <div class="flex flex-dir-reverse">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
// 
// Styleguide 2.1.4

.flex
  
  &.flex-dir_reverse
    box-direction(reverse)
  

// box-flex
// 
// Flexアイテムにこのクラスを指定すると、振り分けられる余白の割合を1にする。
// 勧告候補のflex-growで1を指定したのと同じ働き。  
//
// `.flex-1` → box-flex:1
//
// Markup:
// <div class="flex">
//    <div style="background:black;width:50px;height:50px;"></div>
//    <div class="flex_1" style="background:gray;width:50px;height:50px;"></div>
//    <div style="background:silver;width:50px;height:50px;"></div>
// </div>
//
// Styleguide 2.1.5
  
.flex_1
  box-flex(1)