Skip to content

Latest commit

 

History

History
64 lines (50 loc) · 827 Bytes

flex.md

File metadata and controls

64 lines (50 loc) · 827 Bytes
Raw
description
Flex Utility

Flex

Flex

To set display:flex; use .flex class

Some properties in flex

  • .flex-item
  • .flex-row
  • .flex-col
  • .flex-wrap
  • .flex-start
  • .flex-end
  • .flex-center
  • .flex-stretch
  • .flex-space

Compiled as

//flex - box
.flex {
    display: flex;
    .flex-item {
        flex: 1;
    }
    .flex-row{
        flex-direction: row;
    }
    .flex-col{
        flex-direction: column;
    }
    .flex-wrap{
        flex-wrap: wrap;
    }
    .flex-start{
        justify-content: flex-start;
    }
    .flex-end{
        justify-content: flex-end;
    }
    .flex-center{
        justify-content: center;
    }
    .flex-stretch{
        justify-content: stretch;
    }
    .flex-space{
        justify-content: space-around;
    }
}