這篇文章主要介紹“CSS3中的Flex布局怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3中的Flex布局怎么使用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),東麗企業(yè)網(wǎng)站建設(shè),東麗品牌網(wǎng)站建設(shè),網(wǎng)站定制,東麗網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東麗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

簡介

什么是Flex布局

Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。
Flex布局組成：

• flex容器（flex container）

• flex項（flex items）

• 主軸（main axis）

• 交叉軸（cross axis）

Flex布局的作用

在flex布局未出現(xiàn)前，網(wǎng)頁布局的方式為標(biāo)準(zhǔn)流，浮動，定位等。在解決比較復(fù)雜的問題相對麻煩。【學(xué)習(xí)視頻分享：css視頻教程、web前端】

而flex布局可以：

• 自動彈性伸縮

• 更輕松地設(shè)計靈活的響應(yīng)式布局結(jié)構(gòu)

• 精確靈活控制塊級盒子的布局方式

• 在pc端和移動端都適用

Flex容器（父元素）屬性

在使用flex布局之前首先定義 Flex 容器。

display:flex;

定義 Flex 容器后可以使用相應(yīng)的屬性， 改變子元素的布局方式，讓子元素可以自動的擠壓或拉伸。

相應(yīng)屬性：

1. justify-content  主軸元素對齊方式
2. align-items      交叉軸元素對齊方式
3. flex-direction   設(shè)置主軸方向
4. flex-wrap        主軸一行滿了換行
5. align-content    交叉軸行對齊方式
6. flex-flow        同時設(shè)置 flex-direction和 flex-wrap屬性

1. justify-content

容器的justify-content屬性可以設(shè)置子元素在主軸方向的對齊方式。（記得先display:flex;定義容器）

justify-content: center;//居中對齊

justify-content: space-between;//間距在子元素之間

justify-content: space-evenly;//主軸方向所有地方的間距都相等

justify-content: space-around;//間距加在子元素的兩側(cè)（中間大的是兩個子元素的加在一起）

代碼：

  
    
    
    
    
    
  


  
    

      
1
      
2
      
3
    
  

2. align-items

容器的align-items屬性可以設(shè)置子元素在交叉軸方向的對齊方式。

由此我們可以設(shè)置將容器屬性justify-content和 align-items 設(shè)置為居中，讓元素實現(xiàn)完美居中。

align-items: center;//居中

align-items: stretch;//拉伸,默認(rèn)值(現(xiàn)有狀態(tài),這里測試去掉子級的高度)

align-items: flex-start;//將子元素在容器頂部對齊

align-items: flex-end;//將子元素在容器底部對齊

代碼：

  
    
    
    
    
    
  


  
    

      
1
      
2
      
3
    
  

3. flex-direction

容器的flex-direction屬性可以改變flex布局的主軸方向。flex主軸方向默認(rèn)為水平向右方向。如果修改主軸方向，那么交叉軸方向也會與之改變。

flex-direction: column;//主軸方向為垂直方向（從上到下）

flex-direction: column-reverse;//主軸方向為垂直方向（從下到上）

flex-direction: row;//主軸方向為水平方向（從左到右）

flex-direction: row-reverse;//主軸方向為水平方向（從右到左）

修改主軸方向后實現(xiàn)垂直居中：

display:flex;
flex-direction: column;
justify-content: center;

4. flex-wrap

當(dāng)定義flex容器之后，如果子元素過多超出主軸方向?qū)挾?，容器?nèi)的子元素會自動伸縮。
如：

  
    
    
    
    
    
  


  
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9
    
  

解決：容器的flex-wrap屬性可以讓超出容器主軸方向的子元素?fù)Q行顯示。

flex-wrap: nowrap;//默認(rèn)值，不換行
flex-wrap: wrap;//換行，從上到下

flex-wrap: wrap-reverse;//換行，從下到上

5. align-content

容器的align-content屬性可以調(diào)節(jié)子元素行的對齊方式（需要先設(shè)置換行之后）。

align-content: center;//居中對齊
align-content: space-around;//間距加在子元素的兩側(cè)（中間大的是兩個子元素的加在一起）
align-content: space-between;//間距在子元素之間

前三者的屬性跟主軸對齊方式一樣就不再贅述。

align-content: stretch;拉伸,默認(rèn)值(現(xiàn)有狀態(tài),這里測試去掉子級的高度)

6.flex-flow

flex-flow屬性是用于同時設(shè)置 flex-direction 和 flex-wrap 屬性的簡寫屬性。

flex-flow: row wrap;

Flex項（子元素）屬性

我們可以設(shè)置相應(yīng)屬性讓flex 容器的直接子元素成為彈性（flex）項目。（在使用flex布局之前首先定義 Flex 容器。）

相應(yīng)屬性：

1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order

1. flex-grow

使用flex-grow屬性來定義彈性盒子內(nèi)部子元素的放大比例（當(dāng)所有子元素寬度之和小于父元素的寬度時子元素如何分配父元素的剩余空間）。

2. flex-shrink

使用flex-shrink屬性來定義彈性盒子內(nèi)部子元素的縮小比例（當(dāng)所有子元素寬度之和大于父元素的寬度時子元素如何縮小自己的寬度）。

3. flex-basis

使用flex-basis屬性來設(shè)置子元素的寬度，默認(rèn)值為auto（作用跟width一樣,優(yōu)先級比width高，就算width在后面也會顯示flex-basis）。

4. flex

使用flex屬性來同時設(shè)置flex-grow、flex-shrink、flex-basis這3個屬性，flex屬性就是一個復(fù)合屬性。
實際應(yīng)用一般用復(fù)合屬性。
語法：

flex: grow shrink basis;//順序不能改變,默認(rèn)值為0 1 auto;

5. align-self

使用align-self屬性設(shè)置子元素項目的對齊方式。

注意：align-self屬性會覆蓋容器的 align-items 屬性所設(shè)置的對齊方式。

  
    
    
    
    
    
  
  
    

      
1
      
2
      
3
    
  

6. order

使用order屬性來定義子元素的排列順序。

  
    
    
    
    
    
  
  
    

      
1
      
2
      
3
    
  

關(guān)于“CSS3中的Flex布局怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。