7.30. Bootstrap5 Flex (flexible) layout

发布时间 ： 2025-10-25 13:35:28 UTC      

Page Views: 9 views

Bootstrap5 passed flex class to control the layout of the page.

7.30.1. Elastic box (flexbox)

The biggest difference between Bootstrap 3 and Bootstrap 4ram 5 is that Bootstrap 4amp 5 is laid out using elastic boxes instead of floats.

Elastic box is a new layout mode of CSS3, which is more suitable for responsive design. If you don’t know flex, you can read our CSS3 elastic box tutorial.

Note: elastic boxes are not supported in IE9 and below, so if you need to becompatible with IE8-9, please use Bootstrap 3.

The following examples use the d-flex class to create an elastic box container and set up three elastic elements:

Example 

<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div>    
 To create an elastic box container displayed on the same line, you can use the   d-inline-flex   class: 
  
 
 Example  
 
 
 
<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div>      
 
  7.30.2.  Horizontal direction  
 
   .flex-row   can set the horizontal display of elastic elements, which is the default. 
 
 Use   .flex-row-reverse   class is used to set the right-aligned display, that is, with the   .flex-row   in the opposite direction. 
 
 
 Example  
 
 
 
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div>      
 
  7.30.3.  Vertical direction  
 
   .flex-column   class is used to set the vertical display of elastic subelements   .flex-column-reverse   used to flip rotor elements: 
 
 
 Example  
 
 
 
<div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div>      
 
  7.30.4.  Content arrangement  
 
   .justify-content-\*`   class is used to modify the arrangement of elastic subelements,   \*   the allowed values for the number are: start (default),   end   ,   center   ,   between   or   around   : 
 
 
 Example  
 
 
 
<div class="d-flex justify-content-start">...div> <div class="d-flex justify-content-end">...div> <div class="d-flex justify-content-center">...div> <div class="d-flex justify-content-between">...div> <div class="d-flex justify-content-around">...div>      
 
  7.30.5.  Equal width  
 
   .flex-fill   class forces the width of each elastic subelement to be the same: 
 
 
 Example  
 
 
 
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1div> <div class="p-2 bg-warning flex-fill">Flex item 2div> <div class="p-2 bg-primary flex-fill">Flex item 3div> div>      
 
  7.30.6.  Expansion  
 
   .flex-grow-1   used to set the child elements to use the remaining space. In the following example, the first two child elements only set the space they need, and the last one gets the remaining space. 
 
 
 Example  
 
 
 
<div class="d-flex"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary flex-grow-1">Flex item 3div> div>    
 Tip: usin   .flex-shrink-1   used to set the contraction rules for child elements. 
   
 
  7.30.7.  Sort  
 
   .order   class can set the sort of elastic child elements from the   .order-1   to   .order-12   the lower the number, the higher the weight   .order-1   line up in   .order-2   before): 
 
 
 Example  
 
 
 
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1div> <div class="p-2 bg-warning order-2">Flex item 2div> <div class="p-2 bg-primary order-1">Flex item 3div> div>      
 
  7.30.8.  Outer margin  
 
   .ms-auto   class can set the right outer margin of child elements to   auto   . that is   margin-right:   auto!important;   ,   .ms-auto   class can set the right outer margin of child elements to   auto   , that is   margin-left:   auto!important;   : 
 
 
 Example  
 
 
 
<div class="d-flex mb-3 bg-secondary"> <div class="p-2 ms-auto bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 bg-primary">Flex item 3div> div> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 bg-info">Flex item 1div> <div class="p-2 bg-warning">Flex item 2div> <div class="p-2 me-auto bg-primary">Flex item 3div> div>      
 
  7.30.9.  Parcel  
 
 The following three classes can be used to wrap sub elements in elastic containers:   .flex-nowrap   (default),   .flex-wrap   or   .flex-wrap-   reverse   . Set the   flex   container to be single or multi line. 
 
 
 Example  
 
 
 
<div class="d-flex flex-wrap">..div> <div class="d-flex flex-wrap-reverse">..div> <div class="d-flex flex-nowrap">..div>      
 
  7.30.10.  Content alignment  
 
 We can use ‘. align content -   *   ’ to control how child elements are stacked vertically, including:   .align-content-start   (default),   .align-content-end   ,   .align-content-center   ,   .align-content-between   ,   .align-content-around   and   .align-content-stretch   . 
 
 These classes are not valid in elastic sub-elements with only one row. 
 
 
 Example  
 
 
 
<div class="d-flex flex-wrap align-content-start">..div> <div class="d-flex flex-wrap align-content-end">..div> <div class="d-flex flex-wrap align-content-center">..div> <div class="d-flex flex-wrap align-content-around">..div> <div class="d-flex flex-wrap align-content-stretch">..div>      
 
  7.30.11.  Child element alignment  
 
 If you want to set the alignment of child elements in a single row, you can use the class is used to control, and the values included include:   .align-items-start   ,   .align-items-baseline   , and   .align-items-stretch   (default) . 
 
 
 Example  
 
 
 
<div class="d-flex align-items-start">..div> <div class="d-flex align-items-end">..div> <div class="d-flex align-items-center">..div> <div class="d-flex align-items-around">..div> <div class="d-flex align-items-stretch">..div>      
 
  7.30.12.  Specify child element alignment  
 
 If you want to set the alignment of child elements in a single row, you can use the class is used to control, and the values included include:   .align-items-start   ,   .align-items-baseline   , and   .align-items-stretch   (default) . 
 
 
 Example  
 
 
 
<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1div> <div class="p-2 border align-self-start">Flex item 2div> <div class="p-2 border">Flex item 3div> div>      
 
  7.30.13.  Responsive type   flex   class  
 
 We can set up according to different devices.   flex   class to achieve page responsive layout. The values of* in the following table can be: sm,md, lg or xl, corresponding to small devices, medium devices, large devices, super large devices. 
 
       
  
 Class 
 		  
 Example 
 		  
 Realize 
 		 
   
  
 Elastic container 
 		     
 
  
   .d-*-flex   
 		  
 Create elastic box containers according to different screen devices 
 		  
  Try  
 		 
 
  
   .d-*-inline-flex   
 		  
 Create an inline elastic box container according to different screen devices 
 		  
  Try  
 		 
 
  
 Direction 
 		     
 
  
   .flex-*-row   
 		  
 Display elastic child elements horizontally according to different screen devices 
 		  
  Try  
 		 
 
  
   .flex-*-row-reverse   
 		  
 Display elastic sub-elements horizontally according to different screen devices and align them to the right 
 		  
  Try  
 		 
 
  
   .flex-*-column   
 		  
 Display elastic child elements vertically according to different screen devices 
 		  
  Try  
 		 
 
  
   .flex-*-column-reverse   
 		  
 Elastic sub-elements are displayed vertically according to different screen devices, and in the opposite direction 
 		  
  Try  
 		 
 
  
 Content alignment 
 		     
 
  
   .justify-content-*-start   
 		  
 Display elastic child elements at the start position according to different screen devices (left alignment) 
 		  
  Try  
 		 
 
  
   .justify-content-*-end   
 		  
 Display elastic sub-elements at the tail according to different screen devices (right-aligned) 
 		  
  Try  
 		 
 
  
   .justify-content-*-center   
 		  
 Center the child elements in the flex container according to different screen devices 
 		  
  Try  
 		 
 
  
   .justify-content-*-between   
 		  
 Use “between” to display elastic child elements according to different screen devices 
 		  
  Try  
 		 
 
  
   .justify-content-*-around   
 		  
 Use “around” to display elastic child elements according to different screen devices 
 		  
  Try  
 		 
 
  
 Equal width 
 		     
 
  
   .flex-*-fill   
 		  
 Forced equal width according to different screen devices 
 		  
  Try  
 		 
 
  
 Expansion 
 		     
 
  
   .flex-*-grow-0   
 		  
 Extension is not set for different screen devices 
 		   
 
  
   .flex-*-grow-1   
 		  
 Different screen device settings extension 
 		   
 
  
 Contraction 
 		     
 
  
   .flex-*-shrink-0   
 		  
 Different screen devices do not set shrinkage 
 		   
 
  
   .flex-*-shrink-1   
 		  
 Different screen device settings shrink 
 		   
 
  
 Parcel 
 		     
 
  
   .flex-*-nowrap   
 		  
 Package elements are not set on different screen devices 
 		  
  Try  
 		 
 
  
   .flex-*-wrap   
 		  
 Different screen devices set package elements 
 		  
  Try  
 		 
 
  
   .flex-*-wrap-reverse   
 		  
 Different screen devices reverse package elements 
 		  
  Try  
 		 
 
  
 Content arrangement 
 		     
 
  
   .align-content-*-start   
 		  
 Stack elements at the starting position according to different screen devices 
 		  
  Try  
 		 
 
  
   .align-content-*-end   
 		  
 Stack elements at the end position according to different screen devices 
 		  
  Try  
 		 
 
  
   .align-content-*-center   
 		  
 Stack elements in the middle according to different screen devices 
 		  
  Try  
 		 
 
  
   .align-content-*-around   
 		  
 Use “around” to stack elements depending on the screen device 
 		  
  Try  
 		 
 
  
   .align-content-*-stretch   
 		  
 Stack by stretching elements according to different screen devices 
 		  
  Try  
 		 
 
  
 Sort 
 		     
 
  
   .order-*-0-12   
 		  
 Modify the sort on the small screen size 
 		  
  Try  
 		 
 
  
 Element alignment 
 		     
 
  
   .align-items-*-start   
 		  
 Depending on the screen device, let the element appear on the same line in the header. 
 		  
  Try  
 		 
 
  
   .align-items-*-end   
 		  
 Depending on the screen device, let the elements appear on the same line at the end. 
 		  
  Try  
 		 
 
  
   .align-items-*-center   
 		  
 Depending on the screen device, let the elements appear on the same line in the middle. 
 		  
  Try  
 		 
 
  
   .align-items-*-baseline   
 		  
 Depending on the screen device, make the elements appear on the same line on the baseline. 
 		  
  Try  
 		 
 
  
   .align-items-*-stretch   
 		  
 Depending on the screen device, let the element extend the height and display on the same line. 
 		  
  Try  
 		 
 
  
 The alignment of a single child element 
 		     
 
  
   .align-self-*-start   
 		  
 Depending on the screen device, let a single child element be displayed in the header. 
 		  
  Try  
 		 
 
  
   .align-self-*-end   
 		  
 Depending on the screen device, let a single child element be displayed at the tail 
 		  
  Try  
 		 
 
  
   .align-self-*-center   
 		  
 Depending on the screen device, let a single child element be displayed in the center position 
 		  
  Try  
 		 
 
  
   .align-self-*-baseline   
 		  
 Depending on the screen device, let a single child element be displayed at the baseline position 
 		  
  Try  
 		 
 
  
   .align-self-*-stretch   
 		  
 According to different screen devices, extend a single child element 
 		  
  Try  
 		 
  
 
  
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.30. Bootstrap5 Flex (flexible) layout 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289