| xs |
No |
auto, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 |
xs, sm, md, lg, xl |
The width of column |
| order |
No |
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 |
order, orderSm, orderMd, orderLg, orderXl |
The visual order of your content |
| alignSelf |
No |
start, end, center, baseline, stretch, auto |
alignSelf, alignSelfSm, alignSelfMd, alignSelfLg, alignSelfXl |
It makes possible to override the align-items value for specific flex items. |
| rounded |
No |
true, top, left, bottom, right, 0 |
No |
Round element's corners. |
| flexDirection |
No |
row, row-reverse, column, column-reverse |
flexDirection, flexDirectionSm, flexDirectionMd, flexDirectionLg, flexDirectionXl |
It establishes the main-axis, thus defining the direction flex items are placed in the flex container. |
| flexWrap |
No |
wrap, wrap-reverse, nowrap |
flexWrap, flexWrapSm, flexWrapMd, flexWrapLg, flexWrapXl |
It defines whether the flex items are forced into a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. |
| display |
No |
none, inline, inline-block, block, table, table-cell, flex, inline-flex |
display, displaySm, displayMd, displayLg, displayXl |
Includes support for some of the more common values, as well as some extras for controlling display when printing. |
| alignContent |
display="flex", display="inline-flex" |
start, end, center, between, around, stretch |
alignContent, alignContentSm, alignContentMd, alignContentLg,,alignContentXl |
It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. |
| alignItems |
display="flex", display="inline-flex" |
start, end, center, baseline, stretch |
alignItems, alignItemsSm, alignItemsMd, alignItemsLg, alignItemsXl |
It defines the default behaviour for how flex items are laid out along the cross axis on the current line. |
| justifyContent |
display="flex", display="inline-flex" |
start, end, center, between, around |
justifyContent, justifyContentSm, justifyContentMd, justifyContentLg, justifyContentXl |
It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. |
| m |
No |
0, 1, 2, 3, 4, 5, auto |
m, mSm, mMd, mLg, mXl |
Set margin for element |
| mt |
No |
0, 1, 2, 3, 4, 5, auto |
mt, mtSm, mtMd, mtLg, mtXl |
Set margin-top for element |
| mb |
No |
0, 1, 2, 3, 4, 5, auto |
mb, mbSm, mbMd, mbLg, mbXl |
Set margin-bottom for element |
| ml |
No |
0, 1, 2, 3, 4, 5, auto |
ml, mlSm, mlMd, mlLg, mlXl |
Set margin-left for element |
| mr |
No |
0, 1, 2, 3, 4, 5, auto |
mr, mrSm, mrMd, mrLg, mrXl |
Set margin-right for element |
| mx |
No |
0, 1, 2, 3, 4, 5, auto |
mx, mxSm, mxMd, mxLg, mxXl |
Set horizontal margin for element |
| my |
No |
0, 1, 2, 3, 4, 5, auto |
my, mySm, myMd, myLg, myXl |
Set vertical margin for element |
| p |
No |
0, 1, 2, 3, 4, 5 |
p, pSm, pMd, pLg, pXl |
Set padding for element |
| pt |
No |
0, 1, 2, 3, 4, 5 |
pt, ptSm, ptMd, ptLg, ptXl |
Set padding-top for element |
| pb |
No |
0, 1, 2, 3, 4, 5 |
pb, pbSm, pbMd, pbLg, pbXl |
Set padding-bottom for element |
| pl |
No |
0, 1, 2, 3, 4, 5 |
pl, plSm, plMd, plLg, plXl |
Set padding-left for element |
| pr |
No |
0, 1, 2, 3, 4, 5 |
pr, prSm, prMd, prLg, prXl |
Set padding-right for element |
| px |
No |
0, 1, 2, 3, 4, 5 |
px, pxSm, pxMd, pxLg, pxXl |
Set horizontal padding for element |
| py |
No |
0, 1, 2, 3, 4, 5 |
py, pySm, pyMd, pyLg, pyXl |
Set vertical padding for element |
