flex屬於bootstrap嗎

flex佈局屬於bootstrap；flex指的是彈性佈局，bootstrap可以透過flex類別來控制頁面的佈局，使用「.d-flex」和「.d-inline-flex」實現開啟flex佈局樣式，能不能使用flex彈性佈局也是bootstrap3和bootstrap4的最大差別。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

flex屬於bootstrap

# Bootstrap4 透過flex 類別來控制頁面的佈局

Bootstrap 3 與Bootstrap 4 最大的區別就是Bootstrap 4 使用彈性盒子來佈局，而不是使用浮動來佈局。

• 使用.d-flex和.d-inline-flex實現開啟flex佈局樣式;

• .flex-row可以呈現子元素水平方向的位置，預設居左並從左到右顯示(1,2,3)；

• .flex-row-reverse子元素水平方向居右從左到右顯示(3，2，1);

• .flex-column 實作子元素垂直效果，並從上方往下顯示(1，2,3)；

• .flex-column-reverse實作子元素垂直效果，並從上方往下顯示(3，2，1)；

• .justify-content-start (end、center、between、around)實作內容對齊;

• .align-items-start(end、center、baseline、stretch)實作專案對齊;

• #.align-self-start(end、center、baseline、stretch)實作單一項目對齊;

##範例如下：

            

                1            
            

                2            
            

                3            
        
        

            

                1            
            

                2            
            

                3            
        
        

            

                1            
            

                2            
            

                3            
        

範例如下：

  
  
  
  
  
  
  



  
Flex
  
使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
  
  
    
Flex item 1
    
Flex item 2
    
Flex item 3
  

輸出結果：

#相關推薦：

bootstrap教學#

以上是flex屬於bootstrap嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！