亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 16
粉絲 0
評(píng)論 0
訪問(wèn)量 22143
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
什么是flex布局，它的常用屬性有哪些
剛哥哥
原創(chuàng)
4021人瀏覽過(guò)

什么是flex 布局；

flex是 flexible box 的縮寫(xiě)，就是彈性布局的意思。

任何一個(gè)元素（塊元素、行內(nèi)塊元素、行內(nèi)元素），都可以設(shè)置為彈性盒子屬性。

語(yǔ)法：塊元素： display:flex; 行內(nèi)元素：display:inline-flex;

注意：webkit 內(nèi)核的瀏覽器，須要加上 -webkit 前綴；

  1. 須要注意的是：設(shè)置為flex 布局后，子元素 的 clear（清除浮動(dòng)）、float（浮動(dòng)）和vertical-align（垂直對(duì)齊方式）屬性將失效；

flex布局的基本概念：

  1. 設(shè)置為flex布局的元素，稱(chēng)為flex容器，它的所有子元素就是容器成員，被稱(chēng)為項(xiàng)目。

flex容器默認(rèn)有兩個(gè)軸：

水平主軸（main axis）和垂直交叉軸（cross axis）。

  1. 主軸的開(kāi)始位置叫做 main start(與容器邊框的交叉點(diǎn))，結(jié)束位置叫做 main end;
  2. 交叉軸的開(kāi)始位置叫做cross start,結(jié)束位置叫做 cross end;

項(xiàng)目（容器成員）默認(rèn)沿著主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size;

容器的屬性：

1、flex-direction 設(shè)置項(xiàng)目的排列方向；

值：

  1. row (默認(rèn)值)：主軸為水平方向，起點(diǎn)在左端；
  2. row-reverse: 主軸為水平方向，起點(diǎn)在右端；
  3. column：主軸為垂直方向，起點(diǎn)在上端。
  4. column-reverse: 主軸為垂直方向，起點(diǎn)在下端。

2、flex-wrap 設(shè)置項(xiàng)目換行方式；

值：

  1.  nowrap(默認(rèn)值) ：不換換；
  2. wrap ：換行，第一行在上方；
  3. wrap-reverse: 換行，第一行在下方；

3、flex-flow（常用，設(shè)置主軸方向和換行方式）

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap

值；

  1. row（默認(rèn)值）：
  2. row-reverse：
  3. column：
  4. column-reverse
  5. nowrap | wrap | wrap-reverse

4、justify-content ：（常用）定義項(xiàng)目在主軸上的對(duì)齊方式。

值： 

  1. flex-start（默認(rèn)值）：左對(duì)齊
  2. flex-end：右對(duì)齊
  3. center： 居中
  4. space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
  5. space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間    隔比項(xiàng)目與邊框的間隔大一倍。

5、align-items： 定義項(xiàng)目在交叉軸上的對(duì)齊方式；

值：

  1. flex-start：交叉軸的起點(diǎn)對(duì)齊。
  2. flex-end：交叉軸的終點(diǎn)對(duì)齊。
  3. center：交叉軸的中點(diǎn)對(duì)齊。
  4. baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。
  5. stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

6、align-content ：定義項(xiàng)目在多行容器中的對(duì)齊方式；如果項(xiàng)目只有一行容器，該屬性不起作用。

值：

  1. flex-start：與交叉軸的起點(diǎn)對(duì)齊。
  2. flex-end：與交叉軸的終點(diǎn)對(duì)齊。
  3. center：與交叉軸的中點(diǎn)對(duì)齊。
  4. space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布。
  5. space-around：每根軸線(xiàn)兩側(cè)的間隔都相等。所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間    隔大一倍。
  6. stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。

項(xiàng)目的屬性：

1、order屬性；定義項(xiàng)目在主軸上的排列順序；

  1. 語(yǔ)法： *{order: 1}數(shù)字1是根據(jù)需求自己定義的值，填寫(xiě)整數(shù)，*表示須要設(shè)置排序的項(xiàng)目；

2、flex屬性：定義項(xiàng)目的縮放比例與基準(zhǔn)款寬；

  1. 是 flex-grow/flex-shrink/flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto,后面2各屬性可選；
  2. flex屬性有兩個(gè)快捷值： none和auto（none表示0 0 auto）(auto表示1 1 auto)

3、align-self: 定義單個(gè)項(xiàng)目在交叉軸上的對(duì)齊方式；可覆蓋align-items屬性。

  1. 默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

4、flex-grow屬性

  1. flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
  2. flex-grow:1;默認(rèn)值為0；

5、flex-shrink屬性

  1. flex-shrink：屬性定義項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

6、flex-basis屬性

  1. flex-basis屬性定義項(xiàng)目在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽    器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
  3. 語(yǔ)法：
  4.     .項(xiàng)目 {
  5.           flex-basis: <length> | auto; /* default auto */
  6.     }
  7. 它可以設(shè)為跟width或height屬性一樣的值（比如500px），則項(xiàng)目將占據(jù)固定空間。

代碼練習(xí)：

  1.  <title>flex布局示例代碼</title>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             box-sizing: border-box;
  7.         }
  9.         .rongqi {
  10.             width: 480px;
  11.             height: 180px;
  12.             background-color: skyblue;
  13.             display: flex;
  14.             /* 設(shè)置項(xiàng)目排列方式 */
  15.             /*  flex-direction    
  16.               row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
  17.             row-reverse：主軸為水平方向，起點(diǎn)在右端。
  18.             column：主軸為垂直方向，起點(diǎn)在上沿。
  19.             column-reverse：主軸為垂直方向，起點(diǎn)在下沿。 */
  21.             /* flex-direction: row;
  22.             flex-direction:row-reverse;
  23.             flex-direction: column-reverse;
  24.             flex-direction: column; */
  26.             /* 設(shè)置項(xiàng)目換行方式 */
  27.             /* flex-wrap */
  28.             /*   nowrap： 默認(rèn)值 不換行
  29.             wrap：換行，第一行上方（向下?lián)Q行）
  30.             wrap-reverse: 換行，第一行在下方（向上換行） */
  31.             /*  flex-wrap:wrap;
  32.             flex-wrap: nowrap;
  33.             flex-wrap: wrap-reverse; */
  35.             /* 設(shè)置主軸方向與換行方式 */
  37.             /* flex-flow */
  38.             /* 垂直（起點(diǎn)在下方），換行 */
  39.             /* flex-flow:column wrap; */
  40.             /* 水平從左往右排，不換行 */
  41.             /* flex-flow: row nowrap; */
  42.             /* 垂直（起點(diǎn)在上方），不換行 */
  43.             /* flex-flow:column nowrap; */
  45.             /* 設(shè)置項(xiàng)目在主軸上的對(duì)齊方式 */
  46.             /* justify-content:  */
  47.             /* 從左往右排并且對(duì)齊，默認(rèn)值 */
  48.             /* justify-content: flex-start; */
  49.             /* 從右往左排 并且對(duì)齊*/
  50.             /* justify-content: flex-end; */
  51.             /* 居中排列 */
  52.             /* justify-content: center; */
  53.             /* 兩端對(duì)齊，并且項(xiàng)目之間的間隔都相等 */
  54.             /* justify-content: space-between; */
  55.             /* 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍 */
  56.             /* justify-content: space-around; */
  58.             /* 設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式 */
  59.             /* align-items */
  60.             /* flex-start 從交叉軸的起點(diǎn)對(duì)齊 */
  61.             /* align-items: flex-start; */
  62.             /* flex-end 從交叉軸的終點(diǎn)對(duì)齊 */
  63.             /* align-items: flex-end; */
  64.             /* center 從交叉軸的中間點(diǎn)對(duì)齊 */
  65.             /* align-items: center; */
  66.             /* flex-start 從交叉軸的起點(diǎn)對(duì)齊 */
  67.             /* baseline 從項(xiàng)目的第一行文字基線(xiàn)對(duì)齊 */
  68.             /* align-items: baseline; */
  69.             /* 默認(rèn)值，如果項(xiàng)目沒(méi)有設(shè)置高度或者設(shè)置為auto時(shí)，將占滿(mǎn)整個(gè)容器高度 */
  70.             /* align-items:stretch; */
  73.             /* 設(shè)置項(xiàng)目在多行容器中的對(duì)齊方式 */
  74.             /* align-content:; */
  75.             /* 與交叉軸的起點(diǎn)對(duì)齊 */
  76.             /* align-content: flex-start; */
  77.             /* 與交叉軸的終點(diǎn)對(duì)齊 */
  78.             /* align-content:flex-end; */
  79.             /* 與交叉軸的中間點(diǎn)對(duì)齊 */
  80.             /* align-content: center; */
  81.             /* 與交叉軸的兩端（上下/左右）對(duì)齊，軸線(xiàn)之間的間隔平均分布 */
  82.             /* flex-flow:column wrap; */
  83.             /* align-content:space-between; */
  84.             /* 每根軸線(xiàn)（水平）上下兩側(cè)的間隔相等，靠邊框的一側(cè)的間隔是軸線(xiàn)之間的間隔的一半 */
  85.             /* align-content: space-around; */
  86.             /* 占滿(mǎn)整個(gè)交叉軸，默認(rèn)值 */
  87.             /* align-content: stretch; */
  88.             /* 允許換行 */
  89.             /* flex-wrap: wrap; */
  90.             /* 設(shè)置主軸為水平方向 */
  91.             flex-flow: row wrap;
  96.         }
  98.         .rongqi .xiangmu {
  99.             width: 60px;
  100.             height: 60px;
  101.             background-color: red;
  102.             border: 1px solid violet;
  106.         }
  108.         /* 項(xiàng)目屬性 */
  109.         /* 項(xiàng)目屬性有：
  110.          order（排序、默認(rèn)為零，數(shù)字越小排名越靠前，可以為負(fù)數(shù)）
  111.          flex-grow（定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間也不放大）
  112.          flex-shrink（定義項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將自動(dòng)縮?。?/span>
  113.          flex-basis（定義項(xiàng)目在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）,瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多
  114.                     余空間，它的默認(rèn)值為auto,即項(xiàng)目原本的大小。值可以設(shè)置根寬高一樣的值，這樣它的空間會(huì)被固定）
  115.          flex（這屬性最常用，flex是 flex-frow、flex-shrink、flex-basis的簡(jiǎn)寫(xiě)語(yǔ)法，默認(rèn)值為(0 1 auto),后面兩個(gè)屬性可選，
  116.                     快捷值：[auto（1 1 auto）、none (0 0 auto)]語(yǔ)法：flex：flex-grow flex-shrink flex-basis;
  117.          align-self（設(shè)置單個(gè)項(xiàng)目的對(duì)齊方式（與其它項(xiàng)目的對(duì)齊方式不一樣，個(gè)性化定制對(duì)齊方式）可以覆蓋align-itmes屬性。默認(rèn)
  118.                     值為 auto,即繼承父元素的align-itmes屬性，如果沒(méi)有父元素，則等同于stretch(占滿(mǎn)整個(gè)容器高度)） */
  119.         /* 排列順序 */
  120.         /* .rongqi .xiangmu:first-of-type {
  121.             order: 2;
  122.         }
  124.         .rongqi .xiangmu:nth-of-type(2) {
  125.             order: 3;
  126.         }
  128.         .rongqi .xiangmu:nth-of-type(5) {
  129.             order: -1;
  130.         } */
  131.         /* 放大比例,0為默認(rèn)，有剩余也不放大;都為1 有剩余空間 等分;某個(gè)項(xiàng)目為2，其它為1，為2的項(xiàng)目不為1的項(xiàng)目多占1倍的空間 */
  134.         /*  .rongqi .xiangmu:nth-of-type(1) {
  135.             flex-grow: 0;
  136.              flex-grow: 1; 
  137.         }
  139.         .rongqi .xiangmu:nth-of-type(3) {
  140.             flex-grow: 0;
  141.              flex-grow: 1; 
  142.         }
  144.         .rongqi .xiangmu:nth-of-type(2) {
  145.             flex-grow: 2;
  146.              flex-grow: 1; 
  147.         } */
  149.         /* 定義項(xiàng)目縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小，通過(guò)設(shè)置值來(lái)控制項(xiàng)目是否縮小，多個(gè)項(xiàng)目可以分別設(shè)置，值越小優(yōu)先級(jí)越高（不縮?。?*/
  150.         /* .rongqi .xiangmu:first-of-type{
  151.             flex-shrink:0;
  152.         } */
  153.         /* 定義項(xiàng)目在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間 */
  154.         /* .rongqi .xiangmu:first-of-type{
  155.             flex-basis: 200px;
  156.         }
  157.         */
  159.         /* 語(yǔ)法：flex：flex-grow flex-shrink flex-basis; */
  160.         /*   .rongqi .xiangmu:nth-of-type(9){
  161.             flex:auto; 
  162.             flex:auto;
  163.         } */
  165.         /* 定義單個(gè)項(xiàng)目的對(duì)齊方式 align-self */
  166.         .rongqi .xiangmu:nth-of-type(9) {
  167.             align-self: flex-end;
  168.             align-self: flex-start;
  169.             align-self: center;
  170.             align-self: baseline;
  171.             align-self: stretch;
  172.         }
  175.     </style>
  176. </head>
  178. <body>
  179.     <div class="rongqi">
  180.         <div class="xiangmu">1</div>
  181.         <div class="xiangmu">2</div>
  182.         <div class="xiangmu">3</div>
  183.         <div class="xiangmu">4</div>
  184.         <div class="xiangmu">5</div>
  185.         <div class="xiangmu">6</div>
  186.         <div class="xiangmu">7</div>
  187.         <div class="xiangmu">8</div>
  188.         <div class="xiangmu">8</div>
  189.         <div class="xiangmu">7</div>
  192.     </div>
  193. </body>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：flex已經(jīng)應(yīng)用了十幾年了,已成為標(biāo)準(zhǔn),不需要再加瀏覽器前綴了,除非用戶(hù)使用了非常古老的瀏覽器
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)