2. 程式人生 > 其它 >CSS3flex彈性盒子

CSS3flex彈性盒子

阿新 • • 發佈：2020-12-22

技術標籤：html

flex彈性盒子

一、彈性盒子是 CSS3 的一種新的佈局模式。
1、CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
2、引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
3、彈性盒子與絕對定位的比較
優點： flex：flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。
彈性盒子沒有脫離標準的文件流，絕對定位脫離了標準文件流。

<style>
/*彈性盒子子元素居中*/
        .father
 
{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .son{
            width: 100px;
            height
 
: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

二、flex宣告
1、 宣告定義：
使用display：flex或display：inline-flex 宣告一個容器為彈性盒子。這個容器中的子元素們，會遵循彈性佈局。

【注】一般是使用display:flex. inline-flex極少用。
flex:如果沒有為父元素設定寬，預設為100%；
inline-flex：如果沒有設定寬，，預設為所有子元素的寬的和。
例如

<style>
       .father {
           height: 400px;
           /* width: 400px; */
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: flex;
       }
       
       .son {
           width: 100px;
           height: 100px;
           background-color: blue;
       }
       
       .father2 {
           height: 400px;
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: inline-flex;
       }
       
       .son2 {
           width: 100px;
           height: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son">
       </div>
       <div class="son">
       </div>
       <div class="son">
       </div>
   </div>
   <div class="father2">
       <div class="son2">
       </div>
       <div class="son2">
       </div>
       <div class="son2">
       </div>
   </div>
</body>
</html>

在這裡插入圖片描述
三、flex-direction
用於設定盒子中的子元素的排列方向。
row 從左到右水平排列子元素（預設值）
column 從上往下垂直排列子元素
row-reverse 從右到左排列子元素
column-reverse 從下往上垂直排列子元素

 <style>
        .father {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            /*flex-direction: row;
            flex-direction:  row-reverse;
            flex-direction: column;*/
            flex-direction:  column-reverse ;
        }    
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            background-clip: content-box;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

flex-direction: row從左到右水平排列子元素
在這裡插入圖片描述
flex-direction: row-reverse 從右到左排列子元素
在這裡插入圖片描述
flex-direction: column從上往下垂直排列子元素
在這裡插入圖片描述
flex-direction: column-reverse 從下往上垂直排列子元素
在這裡插入圖片描述
四、flex-wrap
規定flex容器是單行還是多行，是否換行
nowrap:不換行（預設值）
wrap：換行
wrap-reverse 反向換行。
flex-flow
是flex-direction與flex-wrap的組合寫法。
flex-flow:flex-direction flex-wrap；
例如

<style>
       .father {
           width: 400px;
           height: 400px;
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: flex;
           flex-flow: column wrap-reverse;
       }        
       .son {
           width: 100px;
           height: 100px;
           background-color: blue;
           background-clip: content-box;
           padding: 0 10px;
           box-sizing: border-box;
           font-size: 30px;
           line-height: 100px;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son">1
       </div>
       <div class="son">2
       </div>
       <div class="son">3
       </div>
       <div class="son">4
       </div>
       <div class="son">5
       </div>
   </div>
</body>
</html>

子元素從上到下排列反向換行
在這裡插入圖片描述
五、彈性盒子與彈性元素
彈性盒子：指的是使用display：flex或display：inline-flex宣告的容器。
彈性元素：指的是彈性盒子中的子元素。
主軸與側軸（交叉軸）
主軸方向：為子元素排列的方向。可以通過flex-direction改變。
側軸方向：與主軸方向垂直，為子元素的換行方向。可以通過flex-wrap改變。
六、justify-content
用於控制彈性元素在主軸上的排列方式。
flex-start 元素緊靠主軸的起點（預設值）
在這裡插入圖片描述

flex-end 元素緊靠主軸的終點。
在這裡插入圖片描述

center 元素在主軸上居中。
在這裡插入圖片描述
space-between 第一元素緊靠起點，最後一個元素緊靠終點，餘下的元素平均分配剩餘空間。
在這裡插入圖片描述
space-around 每個元素兩側的間隔相等。元素之間的間隔比元素與容器邊框的間隔要大一倍。
在這裡插入圖片描述
space-evenly 元素間距平均分配
在這裡插入圖片描述

<style>
        .father {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            flex-flow: row wrap;
            justify-content:  flex-start ;
            justify-content: flex-end ;
            justify-content:  center ;
            justify-content: space-between;
            justify-content: space-around ;
            justify-content: space-evenly;
        }        
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            background-clip: content-box;        
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
        <div class="son">4
        </div>
    </div>
</body>
</html>

七、align-items
控制元素在側軸上的排列方式。
多行單行都適用的屬性。
flex-start 從側軸開始的地方對齊
flex-end 從側軸結束的地方對齊
center 中間對齊
stretch 拉伸 沒有設定側軸方向上的寬/高時，等於父盒子的寬或高。
例如

    <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row wrap;
            align-content: stretch;
        }        
        .son {
            width: 100px;           
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>  
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

在這裡插入圖片描述
align-content
控制元素在側軸上的排列方式。只適用於多行顯示的彈性容器。
stretch 拉伸
flex-start 元素緊靠行的起點
flex-end 元素緊靠行的終點
center 元素在行中居中
space-between 第一個元素緊靠行的起點，最後一個元素緊靠行的終點，餘下元素平均分配剩餘空間
space-around 元素在側軸方向上的間隔相等。
space-evenly 元素間距離平均分配
八、彈性元素：
不要再去設定float。
設定完絕對定位後，該元素就不再是彈性元素了，不參與彈性佈局。
彈性元素均為塊級元素。
align-self:
用於控制單個元素在側軸上的排列方式。
stretch 拉伸
flex-start
flex-end
center
九、 flex-grow
用於將彈性盒子的可用空間，按照比例分配給彈性元素。

<style>
      .father {
          width: 400px;
          height: 300px;
          margin: 0 auto;
          margin-top: 50px;
          border: 1px solid seagreen;
          display: flex;
          flex-flow: row wrap;
      }      
      .son {
          width: 100px;
          height: 100px;
          background-color: sienna;
          background-clip: content-box;
          box-sizing: border-box;
          font-size: 30px;
          line-height: 100px;
          text-align: center;
          flex-grow: 1;
      }       
      .son:nth-child(2) {
          background-color: cadetblue;
          flex-grow: 2;
      }
  </style>
</head>
<body>
  <div class="father">
      <div class="son">1
      </div>
      <div class="son">2
      </div>
      <div class="son">3
      </div>
  </div>
</body>
</html>

在這裡插入圖片描述
九、flex-shrink
在彈性盒子裝不下子元素時，對子元素縮小的比例設定。
1.計算缺少的值。
2.當前元素應該縮小比例：802/(1001+802+1001)=44.4%
3.應該縮小的值：缺少的值縮小的比例=8044.4%=35.6px
4.最終尺寸：缺少的值-應該縮小的值 80-35.6=44.4px；

  <style>
        .father{
            width: 200px;
            height: 300px;
            margin: 0 auto ;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row nowrap;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            flex-grow: 1;
        }
        .son:nth-child(2){
            width: 80px;
            background-color: cadetblue;
            flex-shrink: 2;
        }
    </style>
</head>
<body>

在這裡插入圖片描述
十、flex-basis
大部分情況下與寬度相等。優先順序比寬要高。定義了元素在主軸上的空間。

       <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row nowrap;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
        
        .son:nth-child(2) {
            flex-basis: 80px;
            width: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
  
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

在這裡插入圖片描述
複合寫法：
flex：flex-grow flew-shrink flex-basis
order:
用於控制彈性元素的位置。預設為0，數值越小越靠前。

 <style>
      .father {
          width: 300px;
          height: 300px;
          margin: 0 auto;
          margin-top: 50px;
          border: 1px solid seagreen;
          display: flex;
          flex-flow: row nowrap;
      }     
      .son {
          width: 100px;
          height: 100px;
          background-color: sienna;
          background-clip: content-box;
          box-sizing: border-box;
          font-size: 30px;
          line-height: 100px;
          text-align: center;
      }
      
      .son:nth-child(2) {
          width: 100px;
          background-color: cadetblue;
          flex: 2 1 100px;
          order: -2;
      }
  </style>
</head>
<body>
  <div class="father">
      <div class="son">1
      </div>
      <div class="son">2
      </div>
      <div class="son">3
      </div>
  </div>
</body>
</html>

在這裡插入圖片描述

相關推薦

CSS3flex彈性盒子

技術標籤：html flex彈性盒子 一、彈性盒子是 CSS3 的一種新的佈局模式。 1、CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

CSS3彈性盒子

一、簡單介紹  彈性盒模型（ Flexible Box或FlexBox）是一個CSS3新增佈局模組，官方稱為CSS Flexible Box Layout Module，用於實現容器裡專案的對齊、方向、排序（即使在專案大小位置、動態生成的情況）, 分配空白

JS Web Flex彈性盒子模型程式碼例項

1.justify-content <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

CSS3 彈性盒子(Flex Box)

彈性盒子是 CSS3 的一種新的佈局模式。 CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

flex彈性盒子

彈性盒模型 flex-direction:row//(預設)主軸為水平方向,起點在左端。flex-direction:row-reverse//主軸為水平方向,起點在右端flex-direction:column//使用後會使主軸變為y軸flex-firection:column-reverse//主軸為垂

14, css3彈性盒子, calc計算函式, css3預處理, less語法

day 14 知識回顧 1、如何設定過渡動畫 transition：需要過渡的屬性 設定過渡時間 速度曲線 延遲時間;

3分鐘快速掌握Css彈性盒子佈局，不看血虧！

彈性盒子（flex） 1.語法：display：flex（定義當前元素為彈性盒子） ①彈性盒子是一種佈局方式

彈性盒子（display:flex）總結

Flexbox是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是CSS3引入的新的佈局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可預測地展現出來。

CSS3中的彈性盒子模型

介紹 在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的佈局方案。彈性盒子模

彈性盒子模型之flex屬性總結

1、技術點：display:flex將塊狀元素能在一排顯示；flex需要新增到父元素上；子元素預設從左到右進行排序。

2020-12-21（彈性盒子）

彈性盒子 1、彈性盒子與彈性元素2、彈性盒子的宣告3、彈性盒子的屬性（父元素的屬性）（1）、flex-direction（2）、 flex-wrap（3）、 flex-flow（4）、 justify-content（5）、 align-items（6）、align-con

最基礎的彈性盒子的應用

技術標籤：htmlcsscss3flex 最基礎的彈性盒子的應用 記錄一下彈性盒子最最最最最基礎的應用

彈性盒子語法-Flex佈局css語法-

技術標籤：CSSFlex佈局cssflexhtml有向圖 彈性盒子語法-Flex佈局css語法- 1. 彈性佈局開啟方式2. 容器屬性3. items的屬性

解決css中flex彈性盒子與overflow一起使用時導致的樣式問題

技術標籤：CSScss3html5flexbox 最近在寫頁面的時候，在一個div上同時設定了flex和overflow後，出現了一些問題。

彈性盒子(靈活佈局)詳解

傳統佈局——基於盒子模型，依賴 display 屬性、position屬性、float屬性。 它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。

css彈性盒子——flex-grow、flex-shrink、flex-basis詳解

https://blog.csdn.net/m0_37058714/article/details/80765562 這三個屬性都是在子元素上設定的

CSS彈性盒子

CSS彈性盒子 介紹 在響應式 Web 設計中，UI 佈局必須適配不同尺寸的裝置。 CSS3 引入了 Flexible Box，簡稱 flexbox（彈性盒子），它特別適合用來建立彈性的頁面佈局。

flex 彈性盒子

display：flex；設定彈性盒子 justify-content屬性：這個屬性可以水平對齊元素 flex-start: 元素和容器的左端對齊。

彈性盒子佈局常用屬性

彈性盒子佈局常用屬性 display : flex 聲明當前容器時彈性容器 （預設從左到右子元素水平排列）

04-彈性盒子佈局

彈性佈局 Flex佈局介紹 Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。