Home Documents Blog
Getting started
Introduction
Core
Foundations Rebooted Elements
Content
Colors Images Breakpoints Z-index
Layout systems
Flex system Grid system
Form elements
Checkboxes Color Pickers Inputs Switches Radios Textareas
Components
Alerts Badges Buttons Breadcrumbs Cards Dropdowns Modals Navbars Tables Tags Toasts Tooltips Trees
Utilities
Background Borders Display Floating Interactions Opacity Overflow Positioning Shadows Sizing Spacing Text Visibility
Getting started
Introduction
Core
Foundations Rebooted Elements
Content
Colors Images Breakpoints Z-index
Layout systems
Flex system Grid system
Form elements
Checkboxes Color Pickers Inputs Switches Radios Textareas
Components
Alerts Badges Buttons Breadcrumbs Cards Dropdowns Modals Navbars Tables Tags Toasts Tooltips Trees
Utilities
Background Borders Display Floating Interactions Opacity Overflow Positioning Shadows Sizing Spacing Text Visibility

Flex system

Explore JTB_MD's flexbox system documentation for easy, versatile layout creation. Learn diverse applications to enhance your projects seamlessly. Your guide to mastering flexible design.

About

JTB_MD's flex system is a layout structure built upon the flexbox concept supported by modern browsers. This system empowers users to easily create responsive, dynamic, and adaptable projects by allowing the assignment of widths and heights relative to their siblings or parents.

Furthermore, the well-defined classes within JTB_MD's flex system provide diverse layout possibilities tailored to different screen types, enhancing the flexibility and adaptability of your projects across various devices.

How it works

To utilize JTB_MD's flex system, simply create a container element with the .jtbF class. This serves as the primary container for your flex elements, and you can create multiple instances of this container on a single page or nest them without any restrictions.

Once you've established the main container, define its behavior using container classes. Add your items inside the container and align them using one of the three alignment structures provided by the library:

  • Occupy system: Define item dimensions based on the main container as pieces (e.g., 2 of 12),
  • Percentage system: Specify item dimensions as percentages relative to the main container (e.g., 85% of container),
  • Multiplication system: Set item dimensions relative to their sibling items (e.g., 2x bigger than sibling).

While detailed explanations of the alignment systems will follow later on this page, understanding the main container's behavior classes will provide a solid foundation.

Basic Usage

As mentioned earlier, the initial step to activate the flex system is to create the main container element that encompasses the item(s). Irrespective of the intended purpose, the main container must be assigned the .jtbF class. Once this class is added, the behavioral classes of the flex system can be applied to the main container.

Display Options

JTB_MD offers two display options for main containers. When you add the .jtbF class to an element, it works on a block level by default. However, if you prefer it to operate on an inline level, you can include the .jtbF-inline class.

For those new to the flexbox concept, understanding the distinctions between block and inline levels is crucial to fully grasp the system's capabilities:

  • .jtbF (block level): Occupies the entire row/column and dynamically positions itself based on its parent.
  • .jtbF-inline (inline level): Covers its content and positions itself and its children based on the children's dimensions.
Keep in mind that .jtbF-inline is not an alternative class for .jtbF. If you want to make your item work on an inline level, you need to add both classes to the element as .jtbF .jtbF-inline.
Hi! I'm a block-level box. :)
Hi! I'm an inline-level box. :)
					<!-- Block Level Example -->
<div class='jtbF'>Hi! I'm block level box. :)</div>

<!-- Inline Level Example -->
<div class='jtbF jtbF-inline'>Hi! I'm inline level box. :)</div>

Adding Children

After creating the main container according to your requirements, you can effortlessly add children by inserting items into it.

Flex Child
Flex Child
Flex Child
					<!-- Block Level Example -->
<div class='jtbF'>
	<div>Flex Child</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>

Flex containers can also be used as nested elements.

Nested Child
Nested Child
Flex Child
Flex Child
					<!-- Block Level Example -->
<div class='jtbF'>
	<div class='jtbF'>
		<div>Nested Child</div>
		<div>Nested Child</div>
	</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>

Once you have created the main container and added its children, you are free to utilize all the features the system provides!

Container Features

JTB_MD's flex system is not only easy to use but also empowers you with all the robust features of the flex structure.

By adding simple classes to your main container, you can easily adjust your items and create the layout.

Flex Direction

On the direction side, JTB_MD defines four different classes that you can use to arrange elements within the main flex container:

  • .jtbF-row (default) orders the children of the container from left to right.
  • .jtbF-row-reverse orders the children of the container from right to left.
  • .jtbF-column orders the children of the container from top to bottom.
  • .jtbF-column-reverse orders the children of the container from bottom to top.
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
					<!-- Block Level - Left to Right ordered -->
<div class='jtbF jtbF-row'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
</div>

<!-- Block Level - Right to Left ordered -->
<div class='jtbF jtbF-row-reverse'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
</div>

<!-- Block Level - Top to Bottom ordered -->
<div class='jtbF jtbF-column'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
</div>

<!-- Block Level - Bottom to Top ordered -->
<div class='jtbF jtbF-column-reverse'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
</div>

Flex Wrapping

JTB_MD defines three classes that you can use to specify the flex container's wrapping ability:

  • .jtbF-wrap (default) allows elements to wrap from the start to the end of the main container.
  • .jtbF-nowrap ensures all children stay on one line without wrapping.
  • .jtbF-wrap-reverse allows elements to wrap from the end to the start of the main container.
First
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Last
First
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Last
First
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Last
					<!-- Block Level - wrapping -->
<div class='jtbF jtbF-wrap'>
	... Children ....
</div>

<!-- Block Level - no wrapping -->
<div class='jtbF jtbF-nowrap'>
	... Children ....
</div>

<!-- Block Level - reverse wrapping -->
<div class='jtbF jtbF-wrap-reverse'>
	... Children ....
</div>

Justifying Content

To justify children in your main container, there are six possible classes you can use:

  • .jtbF-justify-start (default) makes children packed toward the start of the flex-direction.
  • .jtbF-justify-center makes children centered along the line.
  • .jtbF-justify-end makes children packed toward the end of the flex-direction.
  • .jtbF-justify-between makes children evenly distributed in the line, with no spaces on either end.
  • .jtbF-justify-around makes children evenly distributed in the line, with half-size spaces on either end.
  • .jtbF-justify-evenly makes children evenly distributed in the alignment container, with full-size spaces on either end.
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
					<!-- Inline Level - Start of Direction -->
<div class='jtbF jtbF-inline jtbF-justify-start jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>

<!-- Inline Level - Centered -->
<div class='jtbF jtbF-inline jtbF-justify-center jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>

<!-- Inline Level - End of Direction -->
<div class='jtbF jtbF-inline jtbF-justify-end jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>

<!-- Inline Level - Equal Space Between -->
<div class='jtbF jtbF-inline jtbF-justify-between jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>

<!-- Inline Level - Equal Space Between + Low Gaps Each Side -->
<div class='jtbF jtbF-inline jtbF-justify-around jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>

<!-- Inline Level - Equal Space Between + Even Gaps Each Side -->
<div class='jtbF jtbF-inline jtbF-justify-evenly jtbW-100'>
	<div class='_2of12'>Child 1</div>
	<div class='_2of12'>Child 2</div>
	<div class='_2of12'>Child 3</div>
</div>
In the example above, you may notice some child classes (._2of12), which will be explained in detail later in this section. Please disregard them for now.

Aligning Content

To align children in your main container, JTB_MD provides five possible classes:

  • .jtbF-align-start (default) aligns children towards the start of the line.
  • .jtbF-align-center aligns children towards the center of the line.
  • .jtbF-align-end aligns children towards the end of the line.
  • .jtbF-align-baseline aligns children such that their baselines align.
  • .jtbF-align-stretch stretches children within the container.
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
					<!-- Block Level - Start of Direction -->
<div class='jtbF jtbF-align-start'>
	<div style='min-height: 40px;'>Flex Child</div>
	<div style='min-height: 80px;'>Flex Child</div>
	<div style='min-height: 60px;'>Flex Child</div>
</div>

<!-- Block Level - Centered -->
<div class='jtbF jtbF-align-center'>
	<div style='min-height: 40px;'>Flex Child</div>
	<div style='min-height: 80px;'>Flex Child</div>
	<div style='min-height: 60px;'>Flex Child</div>
</div>

<!-- Block Level - End of Direction -->
<div class='jtbF jtbF-align-end'>
	<div style='min-height: 40px;'>Flex Child</div>
	<div style='min-height: 80px;'>Flex Child</div>
	<div style='min-height: 60px;'>Flex Child</div>
</div>

<!-- Block Level - Align Baseline -->
<div class='jtbF jtbF-align-baseline'>
	<div style='min-height: 40px;'>Flex Child</div>
	<div style='min-height: 80px;'>Flex Child</div>
	<div style='min-height: 60px;'>Flex Child</div>
</div>

<!-- Block Level - Stretch Items -->
<div class='jtbF jtbF-align-stretch'>
	<div style='min-height: 40px;'>Flex Child</div>
	<div style='min-height: 80px;'>Flex Child</div>
	<div style='min-height: 60px;'>Flex Child</div>
</div>

Creating Gaps

If you wish to adjust gaps between your flex children, you can easily achieve this by adding one of the related gap classes of the flex system to your main container:

Column Gaps

To create gaps between columns, you can use the column-specific gap classes:

.jtbF-gap-col-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where the numbers specified in classes represent multipliers of the main font size of the project. To make it more clear, to calculate how much space will be there between children, you can easily convert the underscore to a period and multiply it by your base font size. For instance, if the class contains the value 1_75, it indicates that the gap will be 1.75rem.

Child 1
Child 2
Child 3
Child 4
						<!-- Block Level Example -->
<div class='jtbF jtbF-gap-col-1'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
	<div>Child 4</div>
</div>
Row Gaps

Similar to columns, to create gaps between rows, you can use the row-specific gap classes:

.jtbF-gap-row-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where, again, the numbers specified in classes represent multipliers of the main font size of the project. (1_75 indicates 1.75rem gap)

Child 1
Child 2
Child 3
Child 4
						<!-- Block Level Example -->
<div class='jtbF jtbF-column jtbF-gap-col-1'>
	<div>Child 1</div>
	<div>Child 2</div>
	<div>Child 3</div>
	<div>Child 4</div>
</div>
Together

If you do not specify the gap direction while adding the gap class, JTB_MD automatically adds gaps to rows and columns together:

.jtbF-gap-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ]

Where, again, the numbers specified in classes represent multipliers of the main font size of the project. (1_75 indicates 1.75rem gap)

Child 1
Child 2
Child 3
Child 4
Child 1
Child 2
Child 3
Child 4
						<!-- Block Level Example -->
<div class='jtbF jtbF-column jtbF-gap-1'>
	<div class='jtbF jtbF-gap-1'>
		<div>Child 1</div>
		<div>Child 2</div>
		<div>Child 3</div>
		<div>Child 4</div>
	</div>
	<div class='jtbF jtbF-gap-1'>
		<div>Child 1</div>
		<div>Child 2</div>
		<div>Child 3</div>
		<div>Child 4</div>
	</div>
</div>

Positioning Children

Once you've created the main container and defined its features, you can confidently add your items into it.

If you prefer to directly specify the alignments of items within the main container, JTB_MD provides you three systems you can utilize:

Occupy System

The Occupy system of JTB_MD allows users to define the dimensions of child elements relative to their parent. To use this system, you only need to understand two key components:

  • How many pieces the parent needs to have
  • How many of those pieces a specific child element should occupy

Once you've decided on the desired layout, you can add classes with the pattern _[childOccupation]of[parentPieces]. For example, if the parent needs to have 24 pieces and you want a child to occupy 4 pieces of it, simply add ._4of24 to your child element.

4 of 24
16 of 24
4 of 24
					<!-- Occupy system example -->
<div class='jtbF'>
	<div class='_4of24'>4 of 24</div>
	<div class='_16of24'>16 of 24</div>
	<div class='_4of24'>4 of 24</div>
</div>
In the Occupy System, the main container can have a maximum of 24 pieces, and the child occupation level must be between 0 and the number of main container pieces.
Occupy classes

The possible classes you can use for your items in occupy system can be found in the following table:

Occupies piece(s) of main container Base class
0 of 1 ._0of1
1 of 1 ._1of1
0 of 2 ._0of2
1 of 2 ._1of2
2 of 2 ._2of2
0 of 3 ._0of3
1 of 3 ._1of3
2 of 3 ._2of3
3 of 3 ._3of3
0 of 4 ._0of4
1 of 4 ._1of4
2 of 4 ._2of4
3 of 4 ._3of4
4 of 4 ._4of4
0 of 5 ._0of5
1 of 5 ._1of5
2 of 5 ._2of5
3 of 5 ._3of5
4 of 5 ._4of5
5 of 5 ._5of5
0 of 6 ._0of6
1 of 6 ._1of6
2 of 6 ._2of6
3 of 6 ._3of6
4 of 6 ._4of6
5 of 6 ._5of6
6 of 6 ._6of6
0 of 7 ._0of7
1 of 7 ._1of7
2 of 7 ._2of7
3 of 7 ._3of7
4 of 7 ._4of7
5 of 7 ._5of7
6 of 7 ._6of7
7 of 7 ._7of7
0 of 8 ._0of8
1 of 8 ._1of8
2 of 8 ._2of8
3 of 8 ._3of8
4 of 8 ._4of8
5 of 8 ._5of8
6 of 8 ._6of8
7 of 8 ._7of8
8 of 8 ._8of8
0 of 9 ._0of9
1 of 9 ._1of9
2 of 9 ._2of9
3 of 9 ._3of9
4 of 9 ._4of9
5 of 9 ._5of9
6 of 9 ._6of9
7 of 9 ._7of9
8 of 9 ._8of9
9 of 9 ._9of9
0 of 10 ._0of10
1 of 10 ._1of10
2 of 10 ._2of10
3 of 10 ._3of10
4 of 10 ._4of10
5 of 10 ._5of10
6 of 10 ._6of10
7 of 10 ._7of10
8 of 10 ._8of10
9 of 10 ._9of10
10 of 10 ._10of10
0 of 11 ._0of11
1 of 11 ._1of11
2 of 11 ._2of11
3 of 11 ._3of11
4 of 11 ._4of11
5 of 11 ._5of11
6 of 11 ._6of11
7 of 11 ._7of11
8 of 11 ._8of11
9 of 11 ._9of11
10 of 11 ._10of11
11 of 11 ._11of11
0 of 12 ._0of12
1 of 12 ._1of12
2 of 12 ._2of12
3 of 12 ._3of12
4 of 12 ._4of12
5 of 12 ._5of12
6 of 12 ._6of12
7 of 12 ._7of12
8 of 12 ._8of12
9 of 12 ._9of12
10 of 12 ._10of12
11 of 12 ._11of12
12 of 12 ._12of12
0 of 13 ._0of13
1 of 13 ._1of13
2 of 13 ._2of13
3 of 13 ._3of13
4 of 13 ._4of13
5 of 13 ._5of13
6 of 13 ._6of13
7 of 13 ._7of13
8 of 13 ._8of13
9 of 13 ._9of13
10 of 13 ._10of13
11 of 13 ._11of13
12 of 13 ._12of13
13 of 13 ._13of13
0 of 14 ._0of14
1 of 14 ._1of14
2 of 14 ._2of14
3 of 14 ._3of14
4 of 14 ._4of14
5 of 14 ._5of14
6 of 14 ._6of14
7 of 14 ._7of14
8 of 14 ._8of14
9 of 14 ._9of14
10 of 14 ._10of14
11 of 14 ._11of14
12 of 14 ._12of14
13 of 14 ._13of14
14 of 14 ._14of14
0 of 15 ._0of15
1 of 15 ._1of15
2 of 15 ._2of15
3 of 15 ._3of15
4 of 15 ._4of15
5 of 15 ._5of15
6 of 15 ._6of15
7 of 15 ._7of15
8 of 15 ._8of15
9 of 15 ._9of15
10 of 15 ._10of15
11 of 15 ._11of15
12 of 15 ._12of15
13 of 15 ._13of15
14 of 15 ._14of15
15 of 15 ._15of15
0 of 16 ._0of16
1 of 16 ._1of16
2 of 16 ._2of16
3 of 16 ._3of16
4 of 16 ._4of16
5 of 16 ._5of16
6 of 16 ._6of16
7 of 16 ._7of16
8 of 16 ._8of16
9 of 16 ._9of16
10 of 16 ._10of16
11 of 16 ._11of16
12 of 16 ._12of16
13 of 16 ._13of16
14 of 16 ._14of16
15 of 16 ._15of16
16 of 16 ._16of16
0 of 17 ._0of17
1 of 17 ._1of17
2 of 17 ._2of17
3 of 17 ._3of17
4 of 17 ._4of17
5 of 17 ._5of17
6 of 17 ._6of17
7 of 17 ._7of17
8 of 17 ._8of17
9 of 17 ._9of17
10 of 17 ._10of17
11 of 17 ._11of17
12 of 17 ._12of17
13 of 17 ._13of17
14 of 17 ._14of17
15 of 17 ._15of17
16 of 17 ._16of17
17 of 17 ._17of17
0 of 18 ._0of18
1 of 18 ._1of18
2 of 18 ._2of18
3 of 18 ._3of18
4 of 18 ._4of18
5 of 18 ._5of18
6 of 18 ._6of18
7 of 18 ._7of18
8 of 18 ._8of18
9 of 18 ._9of18
10 of 18 ._10of18
11 of 18 ._11of18
12 of 18 ._12of18
13 of 18 ._13of18
14 of 18 ._14of18
15 of 18 ._15of18
16 of 18 ._16of18
17 of 18 ._17of18
18 of 18 ._18of18
0 of 19 ._0of19
1 of 19 ._1of19
2 of 19 ._2of19
3 of 19 ._3of19
4 of 19 ._4of19
5 of 19 ._5of19
6 of 19 ._6of19
7 of 19 ._7of19
8 of 19 ._8of19
9 of 19 ._9of19
10 of 19 ._10of19
11 of 19 ._11of19
12 of 19 ._12of19
13 of 19 ._13of19
14 of 19 ._14of19
15 of 19 ._15of19
16 of 19 ._16of19
17 of 19 ._17of19
18 of 19 ._18of19
19 of 19 ._19of19
0 of 20 ._0of20
1 of 20 ._1of20
2 of 20 ._2of20
3 of 20 ._3of20
4 of 20 ._4of20
5 of 20 ._5of20
6 of 20 ._6of20
7 of 20 ._7of20
8 of 20 ._8of20
9 of 20 ._9of20
10 of 20 ._10of20
11 of 20 ._11of20
12 of 20 ._12of20
13 of 20 ._13of20
14 of 20 ._14of20
15 of 20 ._15of20
16 of 20 ._16of20
17 of 20 ._17of20
18 of 20 ._18of20
19 of 20 ._19of20
20 of 20 ._20of20
0 of 21 ._0of21
1 of 21 ._1of21
2 of 21 ._2of21
3 of 21 ._3of21
4 of 21 ._4of21
5 of 21 ._5of21
6 of 21 ._6of21
7 of 21 ._7of21
8 of 21 ._8of21
9 of 21 ._9of21
10 of 21 ._10of21
11 of 21 ._11of21
12 of 21 ._12of21
13 of 21 ._13of21
14 of 21 ._14of21
15 of 21 ._15of21
16 of 21 ._16of21
17 of 21 ._17of21
18 of 21 ._18of21
19 of 21 ._19of21
20 of 21 ._20of21
21 of 21 ._21of21
0 of 22 ._0of22
1 of 22 ._1of22
2 of 22 ._2of22
3 of 22 ._3of22
4 of 22 ._4of22
5 of 22 ._5of22
6 of 22 ._6of22
7 of 22 ._7of22
8 of 22 ._8of22
9 of 22 ._9of22
10 of 22 ._10of22
11 of 22 ._11of22
12 of 22 ._12of22
13 of 22 ._13of22
14 of 22 ._14of22
15 of 22 ._15of22
16 of 22 ._16of22
17 of 22 ._17of22
18 of 22 ._18of22
19 of 22 ._19of22
20 of 22 ._20of22
21 of 22 ._21of22
22 of 22 ._22of22
0 of 23 ._0of23
1 of 23 ._1of23
2 of 23 ._2of23
3 of 23 ._3of23
4 of 23 ._4of23
5 of 23 ._5of23
6 of 23 ._6of23
7 of 23 ._7of23
8 of 23 ._8of23
9 of 23 ._9of23
10 of 23 ._10of23
11 of 23 ._11of23
12 of 23 ._12of23
13 of 23 ._13of23
14 of 23 ._14of23
15 of 23 ._15of23
16 of 23 ._16of23
17 of 23 ._17of23
18 of 23 ._18of23
19 of 23 ._19of23
20 of 23 ._20of23
21 of 23 ._21of23
22 of 23 ._22of23
23 of 23 ._23of23
0 of 24 ._0of24
1 of 24 ._1of24
2 of 24 ._2of24
3 of 24 ._3of24
4 of 24 ._4of24
5 of 24 ._5of24
6 of 24 ._6of24
7 of 24 ._7of24
8 of 24 ._8of24
9 of 24 ._9of24
10 of 24 ._10of24
11 of 24 ._11of24
12 of 24 ._12of24
13 of 24 ._13of24
14 of 24 ._14of24
15 of 24 ._15of24
16 of 24 ._16of24
17 of 24 ._17of24
18 of 24 ._18of24
19 of 24 ._19of24
20 of 24 ._20of24
21 of 24 ._21of24
22 of 24 ._22of24
23 of 24 ._23of24
24 of 24 ._24of24

Percentage System

The Percentage System allows you to define the relative widths of items inside the flex container using percentages.

For example, if you want to create a flex container with two children, where one has a 20% width and the other has an 80% width, you can assign the classes ._20 and ._80 to the respective children.

An important consideration in this approach is to ensure that the sum of percentages equals 100%. If the total exceeds or falls short of 100%, the actual widths of the children may not precisely match the specified percentage classes.

20% of parent
80% of parent
					<!-- Percentage system example -->
<div class='jtbF'>
	<div class='_20'>20% of parent</div>
	<div class='_80'>80% of parent</div>
</div>
In the percentage system, the clases of children defined as a multiple of 5%.
Percentage classes

The possible classes you can use for your items in percentage system can be found in the following table:

Occupies % of main container Base class
00% ._00
05% ._05
10% ._10
15% ._15
20% ._20
25% ._25
30% ._30
35% ._35
40% ._40
45% ._45
50% ._50
55% ._55
60% ._60
65% ._65
70% ._70
75% ._75
80% ._80
85% ._85
90% ._90
95% ._95
100% ._100

Multiplication System

The Multiplication System allows you to define the relative widths of items inside the flex container based on one children.

For example, if you want to create a flex container with two children, where one has a width X and the other has a width 2X, you can use ._x1 for the root item and ._x2 for the item that is 2X bigger than the root.

In this method, the crucial step is selecting the root item. Since all other items will be distributed based on their powers relative to the root, you need to properly assign its class.

Root item (X1)
3 times the size of root
					<!-- Multiplication system example -->
<div class='jtbF'>
	<div class='_x1'>Root item (X1)</div>
	<div class='_x3'>3 times the size of root</div>
</div>
In the multiplication system, possible weights are defined as 0 to 6.
Multiplication classes

The possible classes you can use for your items in multiplication system can be found in the following table:

Relative power to root element (_x1) Base class
Not flexible ._x0
Equals to root ._x1
2x bigger ._x2
3x bigger ._x3
4x bigger ._x4
5x bigger ._x5
6x bigger ._x6

Responsiveness

Thanks to the responsive structure of JTB_MD, you can make all classes specified within this section work differently on various screen sizes. To achieve this, simply add the corresponding screen breaker at the end of each class, separated by a hyphen (-). Examples include:

You can examine the codes of screen breakers, their related pixel sizes and screen types, from Breakpoints seciton.

In the following example the formation of children in container becomes row-oriented if screen size is bigger than 1920px.

Flex Child
Flex Child
Flex Child
							<!-- Resize your browser to see the difference on different screens -->
<div class='jtbF jtbF-column jtbF-row-xxl'>
	<div>Flex Child</div>
	<div>Flex Child</div>
	<div>Flex Child</div>
</div>

Copyright © 2024 JTBLabs - All rights reserved.