evokit-flex/style.css

The block for building flexible layouts

@custom-media --ek-flex-media-small only screen and (min-width: 480px);

@custom-media --ek-flex-media-medium only screen and (min-width: 768px);

@custom-media --ek-flex-media-large only screen and (min-width: 960px);

@custom-media --ek-flex-media-wide only screen and (min-width: 1200px);

@custom-media --ek-flex-media-huge only screen and (min-width: 1400px);

.ek-flex {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    min-width: 0
}

.ek-flex__item {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0
}

/**
 * Item display:
 *
 *  - flex__item_display_block
 *  - flex__item_display_none
 *
 * */

.ek-flex__item_display_block {
        display: block
}

.ek-flex__item_display_none {
        display: none
}

/**
 * Item align:
 *
 *  - flex__item_align_start
 *  - flex__item_align_end
 *  - flex__item_align_center
 *  - flex__item_align_baseline
 *  - flex__item_align_stretch
 *
 * */

.ek-flex__item_align_start {
            align-self: flex-start
}

.ek-flex__item_align_end {
            align-self: flex-end
}

.ek-flex__item_align_center {
            align-self: center
}

.ek-flex__item_align_baseline {
            align-self: baseline
}

.ek-flex__item_align_stretch {
            align-self: stretch
}

/**
 * Item order:
 *
 *  - flex__item_order_*
 *
 * */

.ek-flex__item_order_0 {
        order: 0
}

.ek-flex__item_order_1 {
        order: 1
}

.ek-flex__item_order_2 {
        order: 2
}

.ek-flex__item_order_3 {
        order: 3
}

.ek-flex__item_order_4 {
        order: 4
}

.ek-flex__item_order_5 {
        order: 5
}

.ek-flex__item_order_6 {
        order: 6
}

.ek-flex__item_order_7 {
        order: 7
}

.ek-flex__item_order_8 {
        order: 8
}

.ek-flex__item_order_9 {
        order: 9
}

.ek-flex__item_order_10 {
        order: 10
}

/**
 * Item empty:
 *
 *  - flex__item_empty_hidden
 *
 * */

.ek-flex__item_empty_hidden:empty {
        display: none
}

/**
 * Display:
 *
 *  - flex_display_flex
 *  - flex_display_inline-flex
 *  - flex_display_none
 *
 * */

.ek-flex_display_flex {
        display: flex
}

.ek-flex_display_inline-flex {
        display: inline-flex
}

.ek-flex_display_none {
        display: none
}

/**
 * Content aligment:
 *
 *  - flex_content_*
 *  - flex_content-align_*
 *  - flex_content-justify_*
 *
 * */

.ek-flex_content_start {
            align-content: flex-start;
            justify-content: flex-start
}

.ek-flex_content-align_start {
            align-content: flex-start
}

.ek-flex_content-justify_start {
            justify-content: flex-start
}

.ek-flex_content_end {
            align-content: flex-end;
            justify-content: flex-end
}

.ek-flex_content-align_end {
            align-content: flex-end
}

.ek-flex_content-justify_end {
            justify-content: flex-end
}

.ek-flex_content_center {
            align-content: center;
            justify-content: center
}

.ek-flex_content-align_center {
            align-content: center
}

.ek-flex_content-justify_center {
            justify-content: center
}

.ek-flex_content_between {
            align-content: space-between;
            justify-content: space-between
}

.ek-flex_content-align_between {
            align-content: space-between
}

.ek-flex_content-justify_between {
            justify-content: space-between
}

.ek-flex_content_around {
            align-content: space-around;
            justify-content: space-around
}

.ek-flex_content-align_around {
            align-content: space-around
}

.ek-flex_content-justify_around {
            justify-content: space-around
}

.ek-flex_content_stretch {
            align-content: stretch;
            justify-content: stretch
}

.ek-flex_content-align_stretch {
            align-content: stretch
}

.ek-flex_content-justify_stretch {
            justify-content: stretch
}

/**
 * Items aligment:
 *
 *  - flex_items_start
 *  - flex_items_end
 *  - flex_items_center
 *  - flex_items_baseline
 *  - flex_items_stretch
 *
 * */

.ek-flex_items_start {
            align-items: flex-start
}

.ek-flex_items_end {
            align-items: flex-end
}

.ek-flex_items_center {
            align-items: center
}

.ek-flex_items_baseline {
            align-items: baseline
}

.ek-flex_items_stretch {
            align-items: stretch
}

/**
 * Direction:
 *
 *  - flex_direction_row
 *  - flex_direction_row-reverse
 *  - flex_direction_column
 *  - flex_direction_column-reverse
 *
 * */

.ek-flex_direction_row {
        flex-direction: row
}

.ek-flex_direction_row-reverse {
        flex-direction: row-reverse
}

.ek-flex_direction_column {
        flex-direction: column
}

.ek-flex_direction_column-reverse {
        flex-direction: column-reverse
}

/**
 * Wrap:
 *
 *  - flex_wrap_nowrap
 *  - flex_wrap_wrap
 *  - flex_wrap_wrap-reverse
 *
 * */

.ek-flex_wrap_nowrap {
        flex-wrap: nowrap
}

.ek-flex_wrap_wrap {
        flex-wrap: wrap
}

.ek-flex_wrap_wrap-reverse {
        flex-wrap: wrap-reverse
}

/**
 * Height:
 *
 *  - flex_height_auto
 *  - flex_height_inherit
 *  - flex_height_1-1
 *
 * */

.ek-flex_height_auto {
            height: auto
}

.ek-flex_height_inherit {
            height: inherit
}

.ek-flex_height_1-1 {
            height: 100%
}