Skip to content

Instantly share code, notes, and snippets.

@johhansantana
Created March 6, 2017 21:38

Revisions

  1. johhansantana created this gist Mar 6, 2017.
    53 changes: 53 additions & 0 deletions flexbox.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    /**
    Flex css start
    */
    .containerFlexRow {
    display: flex;
    flex-direction: row;
    }

    .wrapFlex {
    flex-wrap: wrap;
    }

    .containerFlexCol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    }

    .flexStart {
    justify-content: flex-start;
    }

    .flexCenter {
    justify-content: center;
    }

    .flexEnd {
    justify-content: flex-end;
    }

    .flexAround {
    justify-content: space-around;
    }

    .flexBetween {
    justify-content: space-between;
    }

    .alignStart {
    align-items: flex-start;
    }

    .alignCenter {
    align-items: center;
    }

    .alignEnd {
    align-items: flex-end;
    }

    /**
    Flex css end
    */