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

搜索
博主信息
博文 29
粉絲 1
評(píng)論 0
訪(fǎng)問(wèn)量 43580
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS 彈性盒子（flexbox）常用的的容器屬性與項(xiàng)目屬性介紹
祥子弟弟
原創(chuàng)
4078人瀏覽過(guò)

一、彈性盒子（flexbox）一些基本術(shù)語(yǔ)和簡(jiǎn)單介紹

  • 介紹

    CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對(duì)用戶(hù)界面設(shè)計(jì)而優(yōu)化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿(mǎn)未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對(duì)齊和垂直對(duì)齊都能很方便的進(jìn)行操控。通過(guò)嵌套這些框（水平框在垂直框內(nèi)，或垂直框在水平框內(nèi)）可以在兩個(gè)維度上構(gòu)建布局。

  • 術(shù)語(yǔ)

  1. 容器: 具有display:flex屬性元素，任何元素都可以通過(guò)添加display:flex;屬性，轉(zhuǎn)換為彈性盒元素,轉(zhuǎn)換為 flex 元素后，它的內(nèi)部的“子元素”就支持 flex 布局了。
  2. 項(xiàng)目: flex 容器的”子元素”，容器中的項(xiàng)目自動(dòng)轉(zhuǎn)為行內(nèi)塊元素，不管之前是什么類(lèi)型。
  3. 主軸: 項(xiàng)目排列的軸線(xiàn)，一般默認(rèn)情況下主軸為水平方向。
  4. 交叉軸: 與主軸垂直的軸線(xiàn)，一般默認(rèn)情況下，交叉軸為豎直方向。

二、 常用的容器屬性

屬性 描述
flex-flow 主軸方向與換行方式
justify-content 項(xiàng)目在主軸上的對(duì)齊方式
align-items 項(xiàng)目在交叉軸上的對(duì)齊方式
align-content 項(xiàng)目在多行容器中的對(duì)齊方式

1.flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)
flex-direction 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向。它的默認(rèn)值是row，默認(rèn)水平方向?yàn)橹鬏S。
flex-wrap 指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個(gè)屬性允許你控制行的堆疊方向。它的默認(rèn)值是nowrap，默認(rèn)是不允許換行顯示。

具體演示如下：

html 代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>flex-flow屬性演示</title>
  6.     <link rel="stylesheet" href="style/demo4.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <div class="item">元素塊1</div>
  11.       <div class="item">元素塊2</div>
  12.       <div class="item">元素塊3</div>
  13.       <div class="item">元素塊4</div>
  14.       <div class="item">元素塊5</div>
  15.       <div class="item">元素塊6</div>
  16.       <div class="item">元素塊7</div>
  17.       <div class="item">元素塊8</div>
  18.     </div>
  19.   </body>
  20. </html>

css 代碼

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   /* 轉(zhuǎn)換為flex彈性布局元素 */
  9.   display: flex;
  10.   padding: 1em;
  11.   height: 15em;
  12.   border: 1px solid #000;
  13.   margin: 1em;
  14. }
  16. .container > .item {
  17.   /* height: 2em; */
  18.   width: 5em;
  19.   background-color: lightcyan;
  20.   border: 1px solid #000;
  21. }
  22. /* 1. 單行容器 */
  23. .container {
  24.   /* 控制主軸方向，默認(rèn)值是row水平方向 */
  25.   /* flex-direction: row; */
  26.   /* 控制項(xiàng)目換行方式，默認(rèn)值是nowrap不換行 */
  27.   /* flex-wrap: nowrap; */
  28.   /* 縮寫(xiě)方式flex-flow */
  29.   flex-flow: row nowrap;
  30. }
  31. }

不允許換行顯示效果如下：

可以看到的是，所有的項(xiàng)目都擠在一塊，哪怕是寬度不夠也只會(huì)收縮，不會(huì)換行。
加上 css 代碼

  1. .container {
  2.   flex-flow: row wrap;
  3. }

可以看到的是，在換行允許了之后，項(xiàng)目就不會(huì)收縮，而是換行顯示。 2.justify-content屬性

justify-content 屬性定義了瀏覽器之間，如何分配順著彈性容器主軸的元素之間及其周?chē)目臻g。
在順著主軸的方向空間分配分為兩種情況
第一種是將容器下的所有項(xiàng)目看成是一個(gè)整體進(jìn)行空間分配
第二種是將容器下的項(xiàng)目看成是一個(gè)個(gè)獨(dú)立的個(gè)體進(jìn)行空間分配

  • 整體分配情況

一共有三種情況：

  1. 沿起始位置對(duì)齊：flex-start

  2. 沿終止位置對(duì)齊：flex-end

  3. 居中對(duì)齊：center

示例演示：

html 代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>flex-flow屬性演示</title>
  6.     <link rel="stylesheet" href="style/demo4.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <div class="item">元素塊1</div>
  11.       <div class="item">元素塊2</div>
  12.       <div class="item">元素塊3</div>
  13.       <div class="item">元素塊4</div>
  14.       <div class="item">元素塊5</div>
  15.       <div class="item">元素塊6</div>
  16.       <div class="item">元素塊7</div>
  17.       <div class="item">元素塊8</div>
  18.     </div>
  19.   </body>
  20. </html>

css 代碼

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   /* 轉(zhuǎn)換為flex彈性布局元素 */
  9.   display: flex;
  10.   padding: 1em;
  11.   height: 15em;
  12.   border: 1px solid #000;
  13.   margin: 1em;
  14. }
  16. .container > .item {
  17.   /* height: 2em; */
  18.   width: 5em;
  19.   background-color: lightcyan;
  20.   border: 1px solid #000;
  21. }
  23. .container {
  24.   flex-flow: row nowrap;
  25.   /* 左對(duì)齊 */
  26.   justify-content: flex-start;
  27.   /* 右對(duì)齊 */
  28.   justify-content: flex-end;
  29.   /* 居中對(duì)齊 */
  30.   justify-content: center;
  31. }

按照順序，顯示效果如下：

左對(duì)齊顯示

右對(duì)齊顯示

居中顯示

  • 獨(dú)立分配情況

一共有三種情況：

  1. space-between:均勻排列每個(gè)元素，首個(gè)元素放置于起點(diǎn)，末尾元素放置于終點(diǎn)。

  2. space-around:均勻排列每個(gè)元素，每個(gè)元素周?chē)峙湎嗤目臻g。

  3. space-evenly:均勻排列每個(gè)元素，每個(gè)元素之間的間隔相等。

示例演示：

上邊的 html 代碼不變，css 代碼添加上如下：

  1. .container {
  2.   /* 兩端對(duì)齊,剩余空間在除了起始項(xiàng)目和終結(jié)項(xiàng)目的其他項(xiàng)目?jī)啥似骄植?*/
  3.   justify-content: space-between;
  4.   /* 分散對(duì)齊，剩余空間在每個(gè)項(xiàng)目的左右兩端平均分布 */
  5.   justify-content: space-around;
  6.   /* 平均對(duì)齊，剩余空間在每個(gè)項(xiàng)目之間平均分布 */
  7.   justify-content: space-evenly;
  8. }

顯示效果依次如下：

兩端對(duì)齊顯示：

分散對(duì)齊顯示：

平均對(duì)齊顯示：

3.align-items屬性

align-items屬性是項(xiàng)目在交叉軸上的對(duì)齊方式

它一共有四個(gè)常用的屬性值，分別是：

  1. 默認(rèn)是拉伸的: stretch
  2. 頂對(duì)齊: flex-start
  3. 底對(duì)齊: flex-end
  4. 居中對(duì)齊: center

示例演示：

html 代碼用上邊的，css 代碼添加上下邊的。

  1. .container {
  2.   flex-flow: row wrap;
  3.   /* 默認(rèn)是拉伸的 */
  4.   align-items: stretch;
  5.   /* 頂對(duì)齊 */
  6.   align-items: flex-start;
  7.   /* 底對(duì)齊 */
  8.   align-items: flex-end;
  9.   /* 居中對(duì)齊 */
  10.   align-items: center;
  11. }

顯示效果按順序如下：

默認(rèn)值顯示：

頂對(duì)齊顯示：

底對(duì)齊顯示：

居中對(duì)齊顯示：

4.align-content屬性

align-content 屬性設(shè)置了瀏覽器如何沿著彈性盒子布局的交叉軸在內(nèi)容項(xiàng)之間和周?chē)峙淇臻g。

它一共有 7 個(gè)常用的值，分別是：

  1. stretch（默認(rèn)值）：拉伸所有行來(lái)填滿(mǎn)剩余空間。剩余空間平均地分配給每一行。
  2. flex-start：所有行從垂直軸起點(diǎn)開(kāi)始填充。第一行的垂直軸起點(diǎn)邊和容器的垂直軸起點(diǎn)邊對(duì)齊。接下來(lái)的每一行緊跟前一行。
  3. flex-end：所有行從垂直軸末尾開(kāi)始填充。最后一行的垂直軸終點(diǎn)和容器的垂直軸終點(diǎn)對(duì)齊。同時(shí)所有后續(xù)行與前一個(gè)對(duì)齊。
  4. center：所有行朝向容器的中心填充。每行互相緊挨，相對(duì)于容器居中對(duì)齊。容器的垂直軸起點(diǎn)邊和第一行的距離相等于容器的垂直軸終點(diǎn)邊和最后一行的距離。
  5. space-between：所有行在容器中平均分布。相鄰兩行間距相等。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的邊對(duì)齊。
  6. space-around：所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的距離是相鄰兩行間距的一半。
  7. space-evenly：所有行沿垂直軸均勻分布在對(duì)齊容器內(nèi)。每對(duì)相鄰的項(xiàng)之間的間距，主開(kāi)始邊和第一項(xiàng)，以及主結(jié)束邊和最后一項(xiàng)，都是完全相同的。

它的顯示效果和 align-item 以及 justify-content 屬性的幾種顯示方式相似，不過(guò) align-content 屬性對(duì)于僅限單行的項(xiàng)目不起作用。

三、常用的項(xiàng)目屬性

屬性 描述
flex 項(xiàng)目的縮放比例與基準(zhǔn)寬度
align-self 單個(gè)項(xiàng)目在交叉軸上的對(duì)齊方式
order 項(xiàng)目在主軸上排列順序

1.flex屬性

flex屬性是 flex-grow，flex-shrink，flex-basis 這三個(gè)屬性的縮寫(xiě)
flex-grow屬性設(shè)置了一個(gè) flex 項(xiàng)主尺寸的 flex 增長(zhǎng)系數(shù)。它指定了 flex 容器中剩余空間的多少應(yīng)該分配給項(xiàng)目（flex 增長(zhǎng)系數(shù)）。
flex-shrink屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。
flex-basis屬性指定了 flex 元素在主軸方向上的初始大小。如果不使用 box-sizing 改變盒模型的話(huà)，那么這個(gè)屬性就決定了 flex 元素的內(nèi)容盒（content-box）的尺寸。

示例演示：

html 代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>項(xiàng)目上的屬性：flex</title>
  6.     <link rel="stylesheet" href="style/demo7.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <div class="item">item1</div>
  11.       <div class="item">item2</div>
  12.       <div class="item">item3</div>
  13.       <div class="item">item4</div>
  14.     </div>
  15.   </body>
  16. </html>

css 代碼

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   /* 轉(zhuǎn)換為flex彈性布局元素 */
  9.   display: flex;
  10.   padding: 1em;
  11.   height: 15em;
  12.   border: 1px solid #000;
  13.   margin: 1em;
  14. }
  15. .container > .item {
  16.   /* height: 2em; */
  17.   width: 5em;
  18.   background-color: lightcyan;
  19.   border: 1px solid #000;
  20. }
  22. /* 項(xiàng)目屬性flex */
  23. .container .item {
  24.   /* flex: flex-grow flex-shrink flex-basis;
  25.   flex: 放大因子  收縮因子  項(xiàng)目在主軸上的基準(zhǔn)寬度 */
  26.   /* 默認(rèn)值：flex：0 1 auto;或者是flex：initial; */
  27.   /* 不放大，可以收縮，寬度取容器的width屬性 */
  28.   /* flex: 0 1 auto; */
  29.   flex: initial;
  30.   /* 允許放大和收縮 */
  31.   /* flex: 1 1 auto; */
  32.   flex: auto;
  33.   /* 禁止放大和收縮 */
  34.   /* flex: 0 0 auto; */
  35.   flex: none;
  36.   /* 如果只寫(xiě)一個(gè)數(shù)字，表示放大因子 */
  37.   /* flex: 1;等價(jià)于 flex: 1 1 auto; */
  38.   flex: 1;
  39.   /* flex通常不會(huì)用來(lái)設(shè)置所有項(xiàng)目的默認(rèn)選項(xiàng)，通常用來(lái)設(shè)置某一個(gè)項(xiàng)目的特征 */
  40. }
  42. /* ---------------------------------------------- */
  44. /* 案例，要求第二個(gè)和第三個(gè)項(xiàng)目的寬度是第一個(gè)和第四個(gè)項(xiàng)目的2倍 */
  45. .container > .item:first-of-type,
  46. .container > .item:last-of-type {
  47.   flex: 1;
  48. }
  50. .container > .item:nth-of-type(2),
  51. .container > .item:nth-of-type(3) {
  52.   flex: 2;
  53. }

案例：有四個(gè)項(xiàng)目，要求第二個(gè)和第三個(gè)項(xiàng)目的寬度是第一個(gè)和第四個(gè)項(xiàng)目的 2 倍。
案例顯示：


2.align-self屬性

align-self屬性可以單獨(dú)的去設(shè)置一個(gè)項(xiàng)目在交叉軸上的對(duì)齊方式
它也擁有四個(gè)屬性，分別是：

  1. align-self: stretch；默認(rèn)值。
  2. align-self: flex-start;頂對(duì)齊。
  3. align-self: flex-end;底對(duì)齊。
  4. align-self: center;居中對(duì)齊。

示例演示：

html 代碼用 1 中的代碼，css 代碼示例如下：

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   /* 轉(zhuǎn)換為flex彈性布局元素 */
  9.   display: flex;
  10.   padding: 1em;
  11.   height: 15em;
  12.   border: 1px solid #000;
  13.   margin: 1em;
  14. }
  15. .container > .item {
  16.   /* height: 2em; */
  17.   width: 5em;
  18.   background-color: lightcyan;
  19.   border: 1px solid #000;
  20. }
  21. /* 例如設(shè)置第二個(gè)項(xiàng)目與其他項(xiàng)目的對(duì)齊方式不一樣 */
  23. .container > .item:nth-of-type(2) {
  24.   align-self: stretch;
  25.   align-self: flex-start;
  26.   align-self: flex-end;
  27.   align-self: center;
  28. }

顯示效果按順序如下:

默認(rèn)顯示：

頂對(duì)齊顯示：

底對(duì)齊顯示：

居中對(duì)齊顯示：

3.order屬性

order屬性: 設(shè)置某個(gè)項(xiàng)目在主軸上的排列順序。默認(rèn)序號(hào)越小越靠前,越大越靠后。沒(méi)有 border 屬性就按照代碼書(shū)寫(xiě)順序來(lái)顯示。

示例演示(讓 4 號(hào)項(xiàng)目排在第一位)：

html 代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>設(shè)置項(xiàng)目在主軸上的顯示順序</title>
  6.     <link rel="stylesheet" href="style/demo9.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <div class="item">1</div>
  11.       <div class="item">2</div>
  12.       <div class="item">3</div>
  13.       <div class="item">4</div>
  14.     </div>
  15.   </body>
  16. </html>

css 代碼

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   /* 轉(zhuǎn)換為flex彈性布局元素 */
  9.   display: flex;
  10.   padding: 1em;
  11.   height: 15em;
  12.   border: 1px solid #000;
  13.   margin: 1em;
  14. }
  15. .container > .item {
  16.   /* height: 2em; */
  17.   width: 5em;
  18.   background-color: lightcyan;
  19.   border: 1px solid #000;
  20.   font-size: 3em;
  21. }
  22. /* 顯示順序:默認(rèn)按照源碼的書(shū)寫(xiě)順序排列 */
  23. /* 默認(rèn)序號(hào)越小越靠前,越大越靠后 */
  24. /* 支持負(fù)值 */
  25. .container > .item:first-of-type {
  26.   background-color: yellow;
  27.   order: 1;
  28. }
  29. .container > .item:nth-of-type(2) {
  30.   background-color: lightgreen;
  31.   order: 2;
  32. }
  33. .container > .item:nth-of-type(3) {
  34.   background-color: lightcyan;
  35.   order: 3;
  36. }
  37. .container > .item:last-of-type {
  38.   background-color: #ccc;
  39.   order: 0;
  40. }

顯示效果：

批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：
本博文版權(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é)