Skip to content

Files

Latest commit

 

History

History
63 lines (46 loc) · 1.59 KB

README.md

File metadata and controls

63 lines (46 loc) · 1.59 KB

Flexbox

Before using these utilities, you should be familiar with CSS3 Flexible Box spec.

Usage examples

import Flex, {FLEX_DIRECTION,FLEX_JUSTIFY_VALUES} from 'style-guide/src/components/flex/Flex';

<Flex direction={FLEX_DIRECTION.COLUMN} justifyContent={FLEX_JUSTIFY_VALUES.SPACE_BETWEEN}>
    <div>flex child element</div>
    <div>flex child element</div>
</Flex>
<div class="sg-flex sg-flex--column sg-flex--justify-content-space-between">
    <div>flex child element</div>
    <div>flex child element</div>
</div>

Using spacing util in Flex

These variables are used for margins properties in Flex component:

Variable Value
xxs 4px
xs 8px
s 16px
m 24px
l 40px
xl 64px
xxl 104px
xxxl 168px
xxxxl 272px

There are several options that are avalaible in flex in terms of margin, which are taken from standard CSS properties. Examples:

import Flex, {FLEX_DIRECTION,FLEX_JUSTIFY_VALUES} from 'style-guide/src/components/flex/Flex';


<Flex margin={FLEX_MARGINS.M}>flex children elements</Flex>

// This will output component that have m - 24px from each side
<div class="sg-flex sg-flex--margin-m">flex children elements</div>

<!-- this is the same example in HTML -->
.sg-flex--margin-m {
    margin: 24px
}
/* and the above class in CSS */

Using the above pattern, we have avalaible options of margin, marginTop, marginRight, marginBottom, marginLeft with all the presented spacing values.