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

搜索
博主信息
博文 13
粉絲 1
評(píng)論 0
訪問(wèn)量 18998
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
flex布局涉及到的12個(gè)屬性和實(shí)例
樊天龍的博客
原創(chuàng)
1142人瀏覽過(guò)

flex布局涉及到的12個(gè)屬性和實(shí)例

1.為什么要使用flex布局?

flex意為彈性布局,布局元素大小在flex容器中自動(dòng)伸縮,以適應(yīng)容器的變化,特別適合響應(yīng)式布局

2.容器上的6個(gè)屬性

序號(hào) 名稱 描述
1. flex-direction 主軸方向
2. flex-wrap 主軸上項(xiàng)目換行方式
3. flex-flow 主軸方向和主軸上的項(xiàng)目換行方式的復(fù)合屬性
4. justify-content 主軸上的項(xiàng)目對(duì)齊方式
5. align-items 交叉軸上的項(xiàng)目對(duì)齊方式(適用于單行容器)
6. align-content 交叉軸上的項(xiàng)目對(duì)齊方式(適用于多行容器)

2.1主軸方向flex-direction

2.1.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             /* 將容器設(shè)置為flex容器 */
  10.             display: flex;
  11.             /* 設(shè)置主軸的方向,默認(rèn)從左到右排列 */
  12.             flex-direction: row;
  13.             /* 主軸方向從右到左 */
  14.             /* flex-direction: row-reverse; */
  15.             /* 主軸方向從上到下 */
  16.             /* flex-direction: column; */
  17.             /* 主軸方向從下到上 */
  18.             /* flex-direction: column-reverse; */
  19.             width: 300px;
  20.             height: 150px;
  21.         }
  23.         .item {
  24.             width: 100px;
  25.             height: 100px;
  26.         }
  27.     </style>
  28.     <title>Document</title>
  29. </head>
  31. <body>
  32.     <div class="flex-container">
  33.         <div class="item">flex1</div>
  34.         <div class="item">flex2</div>
  35.         <div class="item">flex3</div>
  36.         <div class="item">flex4</div>
  37.     </div>
  38. </body>
  40. </html>

2.1.2效果圖

2.2項(xiàng)目換行方式flex-wrap

2.2.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             /* 設(shè)置主軸方向項(xiàng)目換行方式,默認(rèn)不換行 */
  11.             flex-wrap: nowrap;
  12.             /* 換行 */
  13.             /* flex-wrap: wrap; */
  14.             /* 反向換行 */
  15.             /* flex-wrap: wrap-reverse; */
  16.             width: 300px;
  17.             height: 300px;
  18.         }
  20.         .item {
  21.             width: 100px;
  22.             height: 100px;
  23.         }
  24.     </style>
  25.     <title>Document</title>
  26. </head>
  28. <body>
  29.     <div class="flex-container">
  30.         <div class="item">flex1</div>
  31.         <div class="item">flex2</div>
  32.         <div class="item">flex3</div>
  33.         <div class="item">flex4</div>
  34.     </div>
  35. </body>
  37. </html>

2.2.2效果圖

2.3flex-flow

2.3.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             /* flex-flow:為flex-direction和flex-wrap的復(fù)合屬性 */
  11.             flex-flow: row wrap;
  12.             width: 300px;
  13.             height: 300px;
  14.         }
  16.         .item {
  17.             width: 100px;
  18.             height: 100px;
  19.         }
  20.     </style>
  21.     <title>Document</title>
  22. </head>
  24. <body>
  25.     <div class="flex-container">
  26.         <div class="item">flex1</div>
  27.         <div class="item">flex2</div>
  28.         <div class="item">flex3</div>
  29.         <div class="item">flex4</div>
  30.     </div>
  31. </body>
  33. </html>

2.3.2效果圖

2,4.主軸上的項(xiàng)目對(duì)齊方式justify-content

2.4.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             width: 500px;
  11.             height: 150px;
  12.             /* 主軸上項(xiàng)目對(duì)齊方式,默認(rèn)左對(duì)齊 */
  13.             justify-content: flex-start;
  14.             /* 右對(duì)齊 */
  15.             /* justify-content: flex-end; */
  16.             /* 居中對(duì)齊 */
  17.             /* justify-content: center; */
  18.             /* 兩端對(duì)齊 */
  19.             /* justify-content: space-between; */
  20.             /* 分散對(duì)齊,項(xiàng)目間距是兩側(cè)兩倍 */
  21.             /* justify-content: space-around; */
  22.             /* 平均對(duì)齊 */
  23.             /* justify-content: space-evenly; */
  24.         }
  26.         .item {
  27.             width: 100px;
  28.             height: 100px;
  29.         }
  30.     </style>
  31.     <title>Document</title>
  32. </head>
  34. <body>
  35.     <div class="flex-container">
  36.         <div class="item">flex1</div>
  37.         <div class="item">flex2</div>
  38.         <div class="item">flex3</div>
  39.         <div class="item">flex4</div>
  40.     </div>
  41. </body>
  43. </html>

2.4.2效果圖

2.5交叉軸上的項(xiàng)目對(duì)齊方式(適用于單行容器)align-items

2.5.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             /* 交叉軸對(duì)齊方式,默認(rèn)為起始線對(duì)齊 */
  11.             align-items: flex-start;
  12.             /* 終止線對(duì)齊 */
  13.             /* align-items: flex-end; */
  14.             /* 居中對(duì)齊 */
  15.             /* align-items: center; */
  16.             width: 400px;
  17.             height: 150px;
  18.         }
  20.         .item {
  21.             width: 100px;
  22.             height: 100px;
  23.         }
  24.     </style>
  25.     <title>Document</title>
  26. </head>
  28. <body>
  29.     <div class="flex-container">
  30.         <div class="item">flex1</div>
  31.         <div class="item">flex2</div>
  32.         <div class="item">flex3</div>
  33.         <div class="item">flex4</div>
  34.     </div>
  35. </body>
  37. </html>

2.5.2效果圖

2.6交叉軸上的項(xiàng)目對(duì)齊方式(適用于多行容器)

2.6.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             flex-flow: row wrap;
  11.             /* 多行容器項(xiàng)目交叉軸對(duì)齊方式,默認(rèn)為stretch */
  12.             /* align-content: stretch; */
  13.             /* 起始線對(duì)齊 */
  14.             align-content: flex-start;
  15.             /* 終止線對(duì)齊 */
  16.             /* align-content: flex-end; */
  17.             /* 居中對(duì)齊 */
  18.             /* align-content: center; */
  19.             /* 兩端對(duì)齊 */
  20.             /* align-content: space-between; */
  21.             /* 分散對(duì)齊 */
  22.             /* align-content: space-around; */
  23.             /* 平均對(duì)齊 */
  24.             /* align-content: space-evenly; */
  25.             width: 300px;
  26.             height: 300px;
  27.         }
  29.         .item {
  30.             width: 100px;
  31.             height: 100px;
  32.         }
  33.     </style>
  34.     <title>Document</title>
  35. </head>
  37. <body>
  38.     <div class="flex-container">
  39.         <div class="item">flex1</div>
  40.         <div class="item">flex2</div>
  41.         <div class="item">flex3</div>
  42.         <div class="item">flex4</div>
  43.     </div>
  44. </body>
  46. </html>

2.6.2效果圖

效果圖同主軸對(duì)齊方式

3.項(xiàng)目上的6個(gè)屬性

序號(hào) 名稱 描述
1. order 項(xiàng)目排序
2. align-self 交叉軸獨(dú)立對(duì)齊方式
3.
3.
3.
3.

3.1項(xiàng)目排序order

3.1.1源代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             width: 400px;
  11.             /* 項(xiàng)目排序,默認(rèn)為0,支持負(fù)數(shù)
  12.                 數(shù)值越小排在前面
  13.              */
  14.             /* order: 0; */
  15.         }
  17.         .item {
  18.             width: 100px;
  19.             height: 100px;
  20.         }
  22.         .item:first-of-type {
  23.             order: 4;
  24.         }
  26.         .item:nth-of-type(2) {
  27.             order: 1;
  28.         }
  30.         .item:nth-of-type(3) {
  31.             /* 支持負(fù)數(shù)排序 */
  32.             order: -1;
  33.         }
  35.         .item:last-of-type {
  36.             order: 6;
  37.         }
  38.     </style>
  39.     <title>Document</title>
  40. </head>
  42. <body>
  43.     <div class="flex-container">
  44.         <div class="item">flex1</div>
  45.         <div class="item">flex2</div>
  46.         <div class="item">flex3</div>
  47.         <div class="item">flex4</div>
  48.     </div>
  49. </body>
  51. </html>

3.1.2效果圖

4.總結(jié)

  • flex基礎(chǔ)雖然已經(jīng)掌握,但是實(shí)戰(zhàn)中用的還是不是很熟練
  • 常用的屬性可以寫成復(fù)合屬性,來(lái)簡(jiǎn)化代碼
  • 后端學(xué)習(xí)時(shí)還可以再仔細(xì)研究和練習(xí)下
批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：不錯(cuò), 用上錨點(diǎn)了, 有個(gè)建議, 在跳轉(zhuǎn)到目標(biāo)處之后應(yīng)該另一個(gè)按鈕, 再跳轉(zhuǎn)到頭部, <a hre="#">回到頂部</a>就可以
本博文版權(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)：公益在線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é)