stylingutilities/stylingutilities/flex.styl

lightweight css utilities library for the front-end web

// Set flex-include-flex-class to TRUE if you want the display: flex; utility class 
// ONLY IF YOU AREN'T IMPORTING display.styl!!
flex-include-flex-class = false 
flex-class-prefix = ""

if flex-include-flex-class {
    .{flex-class-prefix}flex {
        display flex
    }

    .{flex-class-prefix}inline-flex {
        display inline-flex
    }
}

.{flex-class-prefix}row {
    flex-direction row
}

.{flex-class-prefix}row-reverse {
    flex-direction row-reverse
}

.{flex-class-prefix}column {
    flex-direction column
}

.{flex-class-prefix}column-reverse {
    flex-direction column-reverse
}

.{flex-class-prefix}flex-wrap {
    flex-wrap wrap
}

.{flex-class-prefix}flex-wrap-reverse {
    flex-wrap wrap-reverse
}

.{flex-class-prefix}flex-nowrap {
    flex-wrap nowrap
}

.{flex-class-prefix}flex-grow {
    flex-grow 1
}

.{flex-class-prefix}flex-nogrow {
    flex-grow 0
}

.{flex-class-prefix}flex-shrink {
    flex-shrink 1
}

.{flex-class-prefix}flex-noshrink {
    flex-shrink 0
}

.{flex-class-prefix}justify-center {
    justify-content center
}

.{flex-class-prefix}justify-start {
    justify-content flex-start
}

.{flex-class-prefix}justify-end {
    justify-content flex-end
}

.{flex-class-prefix}justify-around {
    justify-content space-around
}

.{flex-class-prefix}justify-between {
    justify-content space-between
}

.{flex-class-prefix}justify-items-auto {
    justify-items auto
}

.{flex-class-prefix}justify-items-center {
    justify-items center
}

.{flex-class-prefix}justify-items-start {
    justify-items flex-start
}

.{flex-class-prefix}justify-items-end {
    justify-items flex-end
}

.{flex-class-prefix}justify-items-stretch {
    justify-items stretch
}

.{flex-class-prefix}justify-self-auto {
    justify-self auto
}

.{flex-class-prefix}justify-self-center {
    justify-self center
}

.{flex-class-prefix}justify-self-start {
    justify-self start
}

.{flex-class-prefix}justify-self-end {
    justify-self end
}

.{flex-class-prefix}justify-self-stretch {
    justify-self stretch
}

.{flex-class-prefix}align-items-center {
    align-items center
}

.{flex-class-prefix}align-items-start {
    align-items flex-start
}

.{flex-class-prefix}align-items-end {
    align-items flex-end
}

.{flex-class-prefix}align-items-baseline {
    align-items baseline
}

.{flex-class-prefix}align-items-stretch {
    align-items stretch
}

.{flex-class-prefix}align-content-center {
    align-content center
}

.{flex-class-prefix}align-content-start {
    align-content flex-start
}

.{flex-class-prefix}align-content-end {
    align-content flex-end
}

.{flex-class-prefix}align-content-around {
    align-content space-around
}

.{flex-class-prefix}align-content-between {
    align-content space-between
}

.{flex-class-prefix}align-content-evenly {
    align-content space-evenly
}

.{flex-class-prefix}align-self-auto {
    align-self auto
}

.{flex-class-prefix}align-self-start {
    align-self start
}

.{flex-class-prefix}align-self-end {
    align-self end
}

.{flex-class-prefix}align-self-center {
    align-self center
}

.{flex-class-prefix}align-self-stretch {
    align-self stretch
}