Browse docs

Getting started

Introduction
Install
Contents
RTL

Customize

Structure

Layouts

Components

Examples and Test

Code Editor
Demos

About

Flex

The MIZ framework uses the powerful capabilities of Flexbox to organize and arrange page elements. Flexbox allows you to easily control the layout and order of elements within a container. With MIZ's Flexbox classes, you can create responsive and flexible designs effortlessly.

Basic Flexbox Classes #

In MIZ, to use Flexbox, you can utilize the following classes:

d-flex: This class is applied to a container to give it the display: flex property.
flex-direction: Classes like .flex-row and .flex-column-reverse determine the direction of the elements.
justify-content: Classes such as .justify-content-start, .justify-content-center, and .justify-content-end define how elements are positioned along the main axis.
align-items: Classes like .align-start , .align-start and .align-end specify how elements are aligned along the vertical axis.
flex-wrap: Classes like .flex-wrap and .flex-nowrap determine whether the elements in the container wrap or not.

Usage #

To use Flexbox classes in MIZ, follow these steps:

Apply the d-flex class to the container:
Use direction and alignment classes:

                    <div class="d-flex">
  <!-- Children go here -->
</div>
                    
                      HTML

                    <div class="d-flex flex-row justify-content-center align-items-center">
  <div>
    <!-- First element -->
  </div>
  <div>
    <!-- Second element -->
  </div>
</div>
                    
                      HTML

Practical Examples #

Example 1: Row with elements centered

                  <div class="d-flex flex-row justify-content-center">
  <div>
    <!-- First element -->
  </div>
  <div>
    <!-- Second element -->
  </div>
</div>
                  
                    HTML

Example 2: Column with elements aligned to the top

                  <div class="d-flex flex-column align-items-start">
  <div>
    <!-- First element -->
  </div>
  <div>
    <!-- Second element -->
  </div>
</div>
                  
                    HTML

Custom Settings #

You can customize Flexbox classes based on your specific needs. To do this, you can use the MIZ configuration files and change the values of the Flexbox classes in miz/sass/config/_responsive.scss

Examples #

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-start align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-center align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-end align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-space-between align-items-start">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-space-around align-items-start">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-space-evenly align-items-start">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-column justify-content-start align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-column justify-content-start align-items-center gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-column justify-content-start align-items-end gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-column justify-content-start align-align-items-stretch gap-1">
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
    <div class="radius-all-small bg-primary-color p-6"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-column justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6 align-self-start"></div>
    <div class="radius-all-small bg-primary-color p-6 align-self-center"></div>
    <div class="radius-all-small bg-primary-color p-6 align-self-end"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-0"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-4"></div>
    <div class="radius-all-small bg-primary-color p-6 grow-1"></div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row flex-wrap justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6">Lorem dolor.</div>
    <div class="radius-all-small bg-primary-color p-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div class="radius-all-small bg-primary-color p-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora perferendis perspiciatis rem.</div>
</div>

                    
                    HTML

                    <div class="bg-on-primary-color w-100 p-2 radius-all-small d-flex flex-row flex-nowrap justify-content-start align-align-items-start gap-1">
    <div class="radius-all-small bg-primary-color p-6">Lorem dolor.</div>
    <div class="radius-all-small bg-primary-color p-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div class="radius-all-small bg-primary-color p-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora perferendis perspiciatis rem.</div>
</div>

Using Flex box in Design #

Using Flexbox in MIZ allows you to create flexible and responsive designs. By combining various classes, you can create layouts that display well on different screen sizes.

Key Points #

High Flexibility: Flexbox provides powerful capabilities for organizing content, allowing you to create highly flexible and diverse layouts.
Ease of Use: With MIZ's ready-to-use classes, you can easily utilize Flexbox features without the need for complex coding.

On this page

Basic Flexbox Classes
Usage
Practical Examples
Custom Settings
Examples
Using Flex box In Design
Key Points