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:

1. Apply the d-flex class to the container:
2. 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 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

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.