欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS3中的Flex布局怎么使用

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

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

簡(jiǎn)介

什么是Flex布局

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

  • flex容器（flex container）

  • flex項(xiàng)（flex items）

  • 主軸（main axis）

  • 交叉軸（cross axis）

CSS3中的Flex布局怎么使用

Flex布局的作用

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

而flex布局可以：

  • 自動(dòng)彈性伸縮

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

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

  • 在pc端和移動(dòng)端都適用

Flex容器（父元素）屬性

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

display:flex;

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

相應(yīng)屬性：

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

1. justify-content

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

justify-content: center;//居中對(duì)齊

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用
代碼：

<!DOCTYPE html>
<html>


  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主軸對(duì)齊方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      .box {
        display: flex;


        /* justify-content: center; */
        /* justify-content: space-between; */
        /* justify-content: space-evenly; */
        justify-content: space-around;

        height: 200px;
        margin: auto;
        border: 1px solid #000;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>


  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>


</html>

2. align-items

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

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

align-items: center;//居中

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用

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

CSS3中的Flex布局怎么使用
代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交叉軸對(duì)齊方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      .father {
        display: flex;
        /* 居中 */
        /* align-items: center; */


        /* 拉伸,默認(rèn)值(現(xiàn)有狀態(tài),測(cè)試的時(shí)候去掉子級(jí)的高度) */
        /* align-items: stretch; */


        /* align-items: flex-start; */
        align-items: flex-end;
        height: 300px;
        margin: auto;
        border: 1px solid #000;
      }

      .father div {
        /* 如果不設(shè)置寬，由內(nèi)容撐開 */
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>


  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>


</html>

3. flex-direction

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

flex-direction: column;//主軸方向?yàn)榇怪狈较颍◤纳系较拢?/pre>
CSS3中的Flex布局怎么使用
flex-direction: column-reverse;//主軸方向?yàn)榇怪狈较颍◤南碌缴希?/pre>
CSS3中的Flex布局怎么使用
flex-direction: row;//主軸方向?yàn)樗椒较颍◤淖蟮接遥?/pre>
CSS3中的Flex布局怎么使用
flex-direction: row-reverse;//主軸方向?yàn)樗椒较颍◤挠业阶螅?/pre>
CSS3中的Flex布局怎么使用
修改主軸方向后實(shí)現(xiàn)垂直居中：
display:flex;
flex-direction: column;
justify-content: center;
CSS3中的Flex布局怎么使用
4. flex-wrap
當(dāng)定義flex容器之后，如果子元素過多超出主軸方向?qū)挾龋萜鲀?nèi)的子元素會(huì)自動(dòng)伸縮。
如：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彈性盒子換行</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      .box {
        display: flex;
        height: 500px;
        border: 1px solid #000;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>


  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>


</html>
CSS3中的Flex布局怎么使用
解決：容器的flex-wrap屬性可以讓超出容器主軸方向的子元素?fù)Q行顯示。
flex-wrap: nowrap;//默認(rèn)值，不換行
flex-wrap: wrap;//換行，從上到下
CSS3中的Flex布局怎么使用
flex-wrap: wrap-reverse;//換行，從下到上
CSS3中的Flex布局怎么使用
5. align-content
容器的align-content屬性可以調(diào)節(jié)子元素行的對(duì)齊方式（需要先設(shè)置換行之后）。
align-content: center;//居中對(duì)齊
align-content: space-around;//間距加在子元素的兩側(cè)（中間大的是兩個(gè)子元素的加在一起）
align-content: space-between;//間距在子元素之間
前三者的屬性跟主軸對(duì)齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認(rèn)值(現(xiàn)有狀態(tài),這里測(cè)試去掉子級(jí)的高度)
CSS3中的Flex布局怎么使用
6.flex-flow
flex-flow屬性是用于同時(shí)設(shè)置 flex-direction 和 flex-wrap 屬性的簡(jiǎn)寫屬性。
flex-flow: row wrap;
Flex項(xiàng)（子元素）屬性
我們可以設(shè)置相應(yīng)屬性讓flex 容器的直接子元素成為彈性（flex）項(xiàng)目。（在使用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)所有子元素寬度之和小于父元素的寬度時(shí)子元素如何分配父元素的剩余空間）。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        /* 沒有設(shè)置寬度 */
        background:red;
        flex-grow: 1;
      }


      .box2{
        background:blue;
        flex-grow: 2;
      }


      .box3{
        background:orange;
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
CSS3中的Flex布局怎么使用
2. flex-shrink
使用flex-shrink屬性來定義彈性盒子內(nèi)部子元素的縮小比例（當(dāng)所有子元素寬度之和大于父元素的寬度時(shí)子元素如何縮小自己的寬度）。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        width: 100px;
        background:red;
        flex-shrink: 1;
      }


      .box2{
        width: 100px;
        background:blue;
        flex-shrink: 2;
      }


      .box3{
        width: 100px;
        background:orange;
        flex-shrink: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
CSS3中的Flex布局怎么使用
3. flex-basis
使用flex-basis屬性來設(shè)置子元素的寬度，默認(rèn)值為auto（作用跟width一樣,優(yōu)先級(jí)比width高，就算width在后面也會(huì)顯示flex-basis）。
4. flex
使用flex屬性來同時(shí)設(shè)置flex-grow、flex-shrink、flex-basis這3個(gè)屬性，flex屬性就是一個(gè)復(fù)合屬性。
實(shí)際應(yīng)用一般用復(fù)合屬性。
語法：
flex: grow shrink basis;//順序不能改變,默認(rèn)值為0 1 auto;
5. align-self
使用align-self屬性設(shè)置子元素項(xiàng)目的對(duì)齊方式。
注意：align-self屬性會(huì)覆蓋容器的 align-items 屬性所設(shè)置的對(duì)齊方式。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father{
        display:flex;
        width:200px;
        height:150px;
        align-items: center;
        border: 1px solid #000;
      }


      .box1{
        width: 100px;
        height: 50px;
        background:red;
        align-self: flex-start;
      }


      .box2{
        width: 100px;
        height: 50px;
        background:blue;
      }


      .box3{
        width: 100px;
        height: 50px;
        background:orange;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
CSS3中的Flex布局怎么使用
6. order
使用order屬性來定義子元素的排列順序。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        width: 100px;
        background:red;
        order: 2;
      }


      .box2{
        width: 100px;
        background:blue;
        order: 1;
      }


      .box3{
        width: 100px;
        background:orange;
        order: 3;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
CSS3中的Flex布局怎么使用
關(guān)于“CSS3中的Flex布局怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
            

                網(wǎng)站名稱：CSS3中的Flex布局怎么使用
                

                標(biāo)題網(wǎng)址：http://chinadenli.net/article14/pgeege.html
            

            

                成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、Google、軟件開發(fā)            

            

                廣告
                
            

            

                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：
                創(chuàng)新互聯(lián)
h5響應(yīng)式網(wǎng)站建設(shè)