CSS Flex Library

Flex, css, ng, angular, flex-box, styles
bower install ui-flex



A CSS Library with built in grid using display:flex


bower install --save ui-flex

Include the following in the <head> of your <html>

<link rel="stylesheet" href="bower_components/ui-flex/dist/ui-flex.css">

NOTE Inorder for the library to work properly, make sure your current CSS files are not modifying the min and max widths or min and max heights of any default HTML Element EXAMPLE body, main, div, header, footer, section, aside.

If your css requires that you modify the defaults for HTML elements, then dont't use these elements when using the flex- classes


Immediately after the <body> tag create an element with the .ui-flex Class. DO NOT PLACE .ui-flex ON THE BODY *- It will not work. *


        <div class="ui-flex"></div>

The .ui-flex class creates a flex-column layout. within this class you can create the following elements

flex-column: One collum contains many rows

.flex-header | flex-basis: $header-height .flex-body | flex: 1 0 auto .flex-footer | flex-basis: $footer-height


    flex-direction : row


<div class="ui-flex">
    <header class="flex-header"></header>
    <section class="flex-body"></section>
    <footer class="flex-footer"></footer>

A row can have many columns or rows.

Inside the .flex-body you are given a flex row layout, so you can then specify elements that will be flexed within the current row.

.flex-main | flex-direction: column, order 0

.flex-aside, .flex-aside-left flex-basis $aside-width, order -1 .flex-aside-right flex-basis $aside-width order 1

Dont't worry about the positions of these elements in the Dom, If you use the .flex-aside-<right or left> the flex container will know how to properly position the elements.

If you don't use the -left or -right you can use the .order-* class to specify the correct order for each element.

Checkout the API for .order-* for the .order- classes

You can also use Checkout the API for using the .flex-aside-*

That said. . . We can flex two asides for sidebars, and a main area for the center.


<div class="ui-flex">
    <header class="flex-header"></header>
    <section class="flex-body">
    <!-- Start Example -->
        <div class="flex-main"></div>
        <aside class="flex-aside-left"></aside>
        <aside class="flex-aside-right"></aside>
    <!-- End Example -->
    <footer class="flex-footer"></footer>


The Flex Class is pretty straight forward. .flex by default , has the CSS property

flex: 1

.flex Will take up all the given room possible, Evenly distributing it's size to it's siblings.


<section clas="flex-row">
    <div class="flex"></div>

The inner div will be 100% tall and 100% wide

If we place two divs inside this .flex-row They Will evenly take up all the available space

<section class="flex-row">
    <div class="flex"></div>
    <div class="flex"></div>

Each inner div will now be 50% wide and 100% tall

The width in this case is known as flex-basis

This will work on up to as many inner elements possible.



The .flex-* Grid can be used in the same way Bootstrap's Grid works.

NOTE There are 12 Columns!


You can use .flex- like the following


<section class="flex-row">
    <div class="flex-3"></div>
    <div class="flex-6"></div>
    <div class="flex-3"></div>


The .flex-{media}-* Grid can be used in the same way BootStrap's Media Queries work.

@media min-width: $breakpoint-xs

@media min-width: $breakpoint-sm

@media min-width: $breakpoint-md

@media min-width: $breakpoint-lg

@media min-width: $breakpoint-xl

You can use .flex-{media}-* like the following


<section class="flex-row">
    <div class="flex-xs-2"></div>
    <div class="flex-sm-2"></div>
    <div class="flex-md-2"></div>
    <div class="flex-lg-2"></div>
    <div class="flex-xl-4"></div>

##.flex-{offset} - - {size}

Similar to BootStrap's offset classes, Except this is one Class.


This will be half the size, and in the center... The first number is the offset size, and the second is the actual size of the element.


You can use .flex-{offset}--{size} like the following in order to center an element that is half the full width.


<section class="flex-row">
    <div class="flex-3--6"></div>

##.flex-{media}-{offset} - - {size}

Similar to BootStrap's offset media classes, Except this is one Class.

@media min-width: $breakpoint-xs

@media min-width: $breakpoint-sm

@media min-width: $breakpoint-md

@media min-width: $breakpoint-lg

@media min-width: $breakpoint-xl

You can use .flex-{media}-{offset}--{size} like the following in order to center an element that is half the full width, even on a mobile screen


<section class="flex-row">
    <div class="flex-xs-3--6"></div>


    flex 0 0 $header-height
    flex-direction: row
    display: flex
    order -1


    flex: 1 0 auto
    flex-direction: row
    order 0


    flex: 0 0 $footer-height
    flex-direction: row
    order 1


    flex 1 0 auto
    flex-direction column
    display flex
    order 0


    flex-basis $aside-width
    flex-direction column
    display flex
    order -1


In order to visualize these elements you can add .bg- classes to them for background colors.

<div class="flex-body bg-red"></div>
<div class="flex-body bg-pink"></div>
<div class="flex-body bg-purple"></div>
<div class="flex-body bg-deeppurple"></div>
<div class="flex-body bg-indigo"></div>
<div class="flex-body bg-blue"></div>
<div class="flex-body bg-lightblue"></div>
<div class="flex-body bg-cyan"></div>
<div class="flex-body bg-teal"></div>
<div class="flex-body bg-green"></div>
<div class="flex-body bg-lightgreen"></div>
<div class="flex-body bg-lime"></div>
<div class="flex-body bg-yellow"></div>
<div class="flex-body bg-amber"></div>
<div class="flex-body bg-orange"></div>
<div class="flex-body bg-deeporange"></div>
<div class="flex-body bg-brown"></div>
<div class="flex-body bg-grey"></div>
<div class="flex-body bg-bluegrey"></div>

Note You can append the following numbers to any of these given classes


For Example

<div class="bg-green"></div>
<div class="bg-green-300"></div>

You can find the resource for these colors in the Goolge Material Design Palette