flexboxgrid-components

Full documentation about styles in flexboxgrid

github

Responsive

Show Code
Show HTML

Fluid

Show Code
Show HTML

Offsets

Show Code
Show HTML

Auto Width

Show Code
Show HTML

Nested Grids

Show Code
Show HTML

Alignment

* Bottom

Show Code
Show HTML

* Center

Show Code
Show HTML

* End

Show Code
Show HTML

* Middle

Show Code
Show HTML

* Start

Show Code
Show HTML

* Top

Show Code
Show HTML

Distribution

* Around

Show Code
Show HTML

* Between

Show Code
Show HTML

Reordering

* First

1
2
3
4
5
6
Show Code
Show HTML

* Last

1
2
3
4
5
6
Show Code
Show HTML

Reversing

1
2
3
4
5
6
Show Code
Show HTML

Wrapper

* Keep separate your Components from Grid-Layout using Wrapper. It's not a good idea add padding or margin to yours Components or these Rows or Columns

Show Code
Show HTML

Column Properties

NameTypeDefaultRequiredDescription
xsAutobooleanfalse
smAutobooleanfalse
mdAutobooleanfalse
lgAutobooleanfalse
xsOffsetnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
smOffsetnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
mdOffsetnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
lgOffsetnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
xsnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
smnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
mdnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
lgnumber | stringAny value of 1,2,3,4,5,6,7,8,9,10,11,12
xsFirstbooleanfalse
smFirstbooleanfalse
mdFirstbooleanfalse
lgFirstbooleanfalse
xsLastbooleanfalse
smLastbooleanfalse
mdLastbooleanfalse
lgLastbooleanfalse
childrenany

Container Properties

NameTypeDefaultRequiredDescription
fluidbooleanfalse
childrenany

Row Properties

NameTypeDefaultRequiredDescription
xsStartbooleanfalseAlign elements to the Start of a column only at xs viewport width 2
smStartbooleanfalseAlign elements to the Start of a column only at sm viewport width
mdStartbooleanfalseAlign elements to the Start of a column only at md viewport width
lgStartbooleanfalseAlign elements to the Start of a column only at lg viewport width
xsCenterbooleanfalseAlign elements to the Center of a column only at xs viewport width
smCenterbooleanfalseAlign elements to the Center of a column only at sm viewport width
mdCenterbooleanfalseAlign elements to the Center of a column only at md viewport width
lgCenterbooleanfalseAlign elements to the Center of a column only at lg viewport width
xsEndbooleanfalseAlign elements to the End of a column only at xs viewport width
smEndbooleanfalseAlign elements to the End of a column only at sm viewport width
mdEndbooleanfalseAlign elements to the End of a column only at md viewport width
lgEndbooleanfalseAlign elements to the End of a column only at lg viewport width
xsTopbooleanfalseAlign elements to the Top of a column only at xs viewport width
smTopbooleanfalseAlign elements to the Top of a column only sm xs viewport width
mdTopbooleanfalseAlign elements to the Top of a column only md xs viewport width
lgTopbooleanfalseAlign elements to the Top of a column only at lg viewport width
xsMiddlebooleanfalseAlign elements to the Middle of a column only at xs viewport width
smMiddlebooleanfalseAlign elements to the Middle of a column only at sm viewport width
mdMiddlebooleanfalseAlign elements to the Middle of a column only at md viewport width
lgMiddlebooleanfalseAlign elements to the Middle of a column only at lg viewport width
xsBottombooleanfalseAlign elements to the Bottom of a column only at xs viewport width
smBottombooleanfalseAlign elements to the Bottom of a column only at sm viewport width
mdBottombooleanfalseAlign elements to the Bottom of a column only at md viewport width
lgBottombooleanfalseAlign elements to the Bottom of a column only at lg viewport width
xsAroundbooleanfalseAlign elements to the Around of a column only at xs viewport width
smAroundbooleanfalseAlign elements to the Around of a column only at sm viewport width
mdAroundbooleanfalseAlign elements to the Around of a column only at md viewport width
lgAroundbooleanfalseAlign elements to the Around of a column only at lg viewport width
xsBetweenbooleanfalseAlign elements to the Between of a column only at xs viewport width
smBetweenbooleanfalseAlign elements to the Between of a column only at sm viewport width
mdBetweenbooleanfalseAlign elements to the Between of a column only at md viewport width
lgBetweenbooleanfalseAlign elements to the Between of a column only at lg viewport width
reversebooleanfalseAlign elements reversing of a column
childrenanyAny component that you want

Wrapper Properties

NameTypeDefaultRequiredDescription
marginnumber0
paddingnumber0
paddingTopnumber
paddingBottomnumber
paddingLeftnumber
paddingRightnumber
marginTopnumber
marginBottomnumber
marginLeftnumber
marginRightnumber
pxbooleantrue
rembooleanfalse
classNamestring
childrenany

Thanks

* Thank you to kristoferjoseph for sharing flexboxgrid library.

* And thank you to coryhouse for sharing his course of how do this kind of projects.