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.

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>
		

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.

				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>
			

				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>
			

				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>
			

				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.

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

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

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

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

				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.

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

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

				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.

				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>
			

				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>
			

				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>
			

				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>
			

				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.