FLEX SYSTEM

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.

How it works

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.

Note: We have added some coloring and padding to boxes to make them more understandable. In reality there are no paddings or margins on jtbFlex system.

Let's look how it works! For using the flex-system; you need to start with a container. :)

Hi! I'm jtbFlex box. :)
Hi! I'm jtbFlexInline box. :)
			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!

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
			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!

Nested Flex Child
Nested Flex Child
Flex Child
Flex Child
Nested Flex Child
Nested Flex Child
Flex Child
Flex Child
			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>
		

Flex direction

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.

.jtbFlexRow (Default)

Allows to position the .jtbFlex's | .jtbFlexInline's items from left-to-right.

Flex Child 1
Flex Child 2
Flex Child 3
Flex Child 1
Flex Child 2
Flex Child 3
				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>
			

.jtbFlexRowReverse

Allows to position the .jtbFlex's | .jtbFlexInline's items from right-to-left.

Flex Child 1
Flex Child 2
Flex Child 3
Flex Child 1
Flex Child 2
Flex Child 3
				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>
			

.jtbFlexColumn

Allows to position the .jtbFlex's | .jtbFlexInline's items from top-to-bottom.

Flex Child 1
Flex Child 2
Flex Child 3
Flex Child 1
Flex Child 2
Flex Child 3
				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>
			

.jtbFlexColumnReverse

Allows to position the .jtbFlex's | .jtbFlexInline's items from bottom-to-top.

Flex Child 1
Flex Child 2
Flex Child 3
Flex Child 1
Flex Child 2
Flex Child 3
				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>
			

Flex wrapping

JTB_MD's flex system has also allows you to decide your flex-box's wrapping style.

.jtbFlexWrap (Default)

Makes .jtbFlex's | .jtbFlexInline's items will wrap onto multiple lines, from top to bottom..

Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
				Copy
				<div class='jtbFlex jtbFlexWrap'>
	.. Adding Child Divs ..
</div>

<div class='jtbFlexInline jtbFlexWrap'>
	.. Adding Child Divs ..
</div>
			

.jtbFlexNoWrap

Makes .jtbFlex's | .jtbFlexInline's items will be on one line

Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
				Copy
				<div class='jtbFlex jtbFlexNoWrap'>
	.. Adding Child Divs ..
</div>

<div class='jtbFlexInline jtb100Width jtbFlexNoWrap'>
	.. Adding Child Divs ..
</div>
			

.jtbFlexWrapReverse

Makes .jtbFlex's | .jtbFlexInline's items will wrap onto multiple lines from bottom to top.

Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
Flex Child First
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child Last
				Copy
				<div class='jtbFlex jtbFlexWrapReverse'>
	.. Adding Child Divs ..
</div>

<div class='jtbFlexInline jtbFlexWrapReverse'>
	.. Adding Child Divs ..
</div>
			

Aligning content (Row positioning)

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.

.jtbFlexJustifyStart (Default)

Makes .jtbFlexInline's items are packed toward the start of the flex-direction.

Flex Child
Flex Child
Flex Child
				Copy
				<div class='jtbFlexInline jtb100Width jtbFlexJustifySpaceBetween'>
	<div>Flex Child</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>
			

.jtbFlexJustifyEnd

Makes .jtbFlexInline's items are packed toward the end of the flex-direction.

Flex Child
Flex Child
Flex Child
				Copy
				<div class='jtbFlexInline jtb100Width jtbFlexJustifyEnd'>
	<div>Flex Child</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>
			

.jtbFlexJustifyCenter

Makes .jtbFlexInline's items are centered along the line.

Flex Child
Flex Child
Flex Child
				Copy
				<div class='jtbFlexInline jtb100Width jtbFlexJustifyCenter'>
	<div>Flex Child</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>
			

Aligning content (Column positioning)

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.

.jtbFlexAlignStretch (Default)

Makes .jtbFlex's | .jtbFlexInline's items are stretched to fill the container.

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
				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>
			

.jtbFlexAlignStart

Makes .jtbFlex's | .jtbFlexInline's items are placed at the start of the cross axis.

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
				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>
			

.jtbFlexAlignEnd

Makes .jtbFlex's | .jtbFlexInline's items are placed at the end of the cross axis.

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
				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>
			

.jtbFlexAlignCenter

Makes .jtbFlex's | .jtbFlexInline's items are centered in the cross-axis.

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
				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>
			

.jtbFlexAlignBaseline

Makes .jtbFlex's | .jtbFlexInline's items are aligned such as their baselines align.

Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
Flex Child
				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>
			

Responsiveness of classes

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