JTB MD has a unique grid system which depends on highly flex attribute of browsers. Instead of defining the piece widths | heights individually, the system creates the opportunity to make widths | heights of the objects relative to their siblings. By using this method; JTB_MD allows its users to create easier placeable, responsive, dynamic, and changable parts.
The jtbFlex sytem is so easy to use: You need to start with a container which has a class .jtbFlex
or .jtbFlexInline
(Depends on your needs). This is the main container of the other elements. You can create it multiple times in a single page, or as nested... There is no restriction of using it.
Important! Before going further, we need to tell that .jtbFlex
and .jtbFlexInline
are two different flex-boxes which are specialized for spesific needs:
.jtbFlex
generates a flex-container box that is block-level; occupies the whole row, and position itself and its children flexibly and dynamically..jtbFlexInline
generates a flex-container box that is inline-level, covers its content, and position itself and its children flexibly and dynamically.Let's look how it works! For using the flex-system; you need to start with a container. :)
Copy
<div class='jtbFlex'>Hi! I'm jtbFlex box. :)</div>
<div class='jtbFlexInline'>Hi! I'm jtbFlexInline box. :)</div>
After creating the container, you can add its children!
Copy
<div class='jtbFlex'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
<div class='jtbFlexInline'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
Also you can use flex boxes as nested!
Copy
<div class='jtbFlex'>
<div class='jtbFlex'>
<div>Nested Flex Child</div>
<div>Nested Flex Child</div>
</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
<div class='jtbFlexInline'>
<div class='jtbFlexInline'>
<div>Nested Flex Child</div>
<div>Nested Flex Child</div>
</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
While JTB_MD's flex system is easy to use; it is also so powerful too. There are several options that you can use to make box direction the way you want. The following are different options for your item positioning while creating your .jtbFlex
| .jtbFlexInline
.
Allows to position the .jtbFlex
's | .jtbFlexInline
's items from left-to-right.
Copy
<div class='jtbFlex jtbFlexRow'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
<div class='jtbFlexInline jtbFlexRow'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
Allows to position the .jtbFlex
's | .jtbFlexInline
's items from right-to-left.
Copy
<div class='jtbFlex jtbFlexRowReverse'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
<div class='jtbFlexInline jtbFlexRowReverse'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
Allows to position the .jtbFlex
's | .jtbFlexInline
's items from top-to-bottom.
Copy
<div class='jtbFlex jtbFlexColumn'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
<div class='jtbFlexInline jtbFlexColumn'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
Allows to position the .jtbFlex
's | .jtbFlexInline
's items from bottom-to-top.
Copy
<div class='jtbFlex jtbFlexColumnReverse'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
<div class='jtbFlexInline jtbFlexColumnReverse'>
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
</div>
JTB_MD's flex system has also allows you to decide your flex-box's wrapping style.
Makes .jtbFlex
's | .jtbFlexInline
's items will wrap onto multiple lines, from top to bottom..
Copy
<div class='jtbFlex jtbFlexWrap'>
.. Adding Child Divs ..
</div>
<div class='jtbFlexInline jtbFlexWrap'>
.. Adding Child Divs ..
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items will be on one line
Copy
<div class='jtbFlex jtbFlexNoWrap'>
.. Adding Child Divs ..
</div>
<div class='jtbFlexInline jtb100Width jtbFlexNoWrap'>
.. Adding Child Divs ..
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items will wrap onto multiple lines from bottom to top.
Copy
<div class='jtbFlex jtbFlexWrapReverse'>
.. Adding Child Divs ..
</div>
<div class='jtbFlexInline jtbFlexWrapReverse'>
.. Adding Child Divs ..
</div>
Since .jtbFlex
occupies whole row and resizes its children; the justify option is not working with it (if not changed manually). On the other side, if we increase the .jtbFlexInline
's width manually (jtb100Width) and apply the classes into it; it will work as expected.
Makes .jtbFlexInline
's items are packed toward the start of the flex-direction.
Copy
<div class='jtbFlexInline jtb100Width jtbFlexJustifySpaceBetween'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
Makes .jtbFlexInline
's items are packed toward the end of the flex-direction.
Copy
<div class='jtbFlexInline jtb100Width jtbFlexJustifyEnd'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
Makes .jtbFlexInline
's items are centered along the line.
Copy
<div class='jtbFlexInline jtb100Width jtbFlexJustifyCenter'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
Since .jtbFlex
's | .jtbFlexInline
's items inherit the height of the flex-box; in this part we are going to define custom heights for both flex-boxes and its children.
Makes .jtbFlex
's | .jtbFlexInline
's items are stretched to fill the container.
Copy
<div class='jtbFlex jtbFlexAlignStretch' style='height: 100px;'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
<div class='jtbFlexInline jtbFlexAlignStretch' style='height: 100px;'>
<div>Flex Child</div>
<div>Flex Child</div>
<div>Flex Child</div>
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items are placed at the start of the cross axis.
Copy
<div class='jtbFlex jtbFlexAlignStart' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
<div class='jtbFlexInline jtbFlexAlignStart' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items are placed at the end of the cross axis.
Copy
<div class='jtbFlex jtbFlexAlignEnd' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
<div class='jtbFlexInline jtbFlexAlignEnd' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items are centered in the cross-axis.
Copy
<div class='jtbFlex jtbFlexAlignCenter' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
<div class='jtbFlexInline jtbFlexAlignCenter' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
Makes .jtbFlex
's | .jtbFlexInline
's items are aligned such as their baselines align.
Copy
<div class='jtbFlex jtbFlexAlignBaseline' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
<div class='jtbFlexInline jtbFlexAlignBaseline' style='height: 100px;'>
<div style='height: 20px;'>Flex Child</div>
<div style='height: 80px;'>Flex Child</div>
<div style='height: 50px;'>Flex Child</div>
</div>
All the screen breakpoints, which we have stated in Responsiveness, are usable for all classes above. So If you want to create an effect on specific type of screen; just add the screen breakpoint at the end of the class.
All screens | Extra small screens only | Small screens only | Medium screens only | Large screens only |
---|---|---|---|---|
.jtbFlex | .jtbFlex_xs | .jtbFlex_sm | .jtbFlex_md | .jtbFlex_lg |
.jtbFlexInline | .jtbFlexInline_xs | .jtbFlexInline_sm | .jtbFlexInline_md | .jtbFlexInline_lg |
.jtbFlexRow | .jtbFlexRow_xs | .jtbFlexRow_sm | .jtbFlexRow_md | .jtbFlexRow_lg |
.jtbFlexRowReverse | .jtbFlexRowReverse_xs | .jtbFlexRowReverse_sm | .jtbFlexRowReverse_md | .jtbFlexRowReverse_lg |
.jtbFlexColumn | .jtbFlexColumn_xs | .jtbFlexColumn_sm | .jtbFlexColumn_md | .jtbFlexColumn_lg |
.jtbFlexColumnReverse | .jtbFlexColumnReverse_xs | .jtbFlexColumnReverse_sm | .jtbFlexColumnReverse_md | .jtbFlexColumnReverse_lg |
.jtbFlexWrap | .jtbFlexWrap_xs | .jtbFlexWrap_sm | .jtbFlexWrap_md | .jtbFlexWrap_lg |
.jtbFlexNoWrap | .jtbFlexNoWrap_xs | .jtbFlexNoWrap_sm | .jtbFlexNoWrap_md | .jtbFlexNoWrap_lg |
.jtbFlexWrapReverse | .jtbFlexWrapReverse_xs | .jtbFlexWrapReverse_sm | .jtbFlexWrapReverse_md | .jtbFlexWrapReverse_lg |
.jtbFlexJustifyStart | .jtbFlexJustifyStart_xs | .jtbFlexJustifyStart_sm | .jtbFlexJustifyStart_md | .jtbFlexJustifyStart_lg |
.jtbFlexJustifyEnd | .jtbFlexJustifyEnd_xs | .jtbFlexJustifyEnd_sm | .jtbFlexJustifyEnd_md | .jtbFlexJustifyEnd_lg |
.jtbFlexJustifyCenter | .jtbFlexJustifyCenter_xs | .jtbFlexJustifyCenter_sm | .jtbFlexJustifyCenter_md | .jtbFlexJustifyCenter_lg |
.jtbFlexAlignStretch | .jtbFlexAlignStretch_xs | .jtbFlexAlignStretch_sm | .jtbFlexAlignStretch_md | .jtbFlexAlignStretch_lg |
.jtbFlexAlignStart | .jtbFlexAlignStart_xs | .jtbFlexAlignStart_sm | .jtbFlexAlignStart_md | .jtbFlexAlignStart_lg |
.jtbFlexAlignEnd | .jtbFlexAlignEnd_xs | .jtbFlexAlignEnd_sm | .jtbFlexAlignEnd_md | .jtbFlexAlignEnd_lg |
.jtbFlexAlignCenter | .jtbFlexAlignCenter_xs | .jtbFlexAlignCenter_sm | .jtbFlexAlignCenter_md | .jtbFlexAlignCenter_lg |
.jtbFlexAlignBaseline | .jtbFlexAlignBaseline_xs | .jtbFlexAlignBaseline_sm | .jtbFlexAlignBaseline_md | .jtbFlexAlignBaseline_lg |