亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

彈性盒模型，flex布局

CoderDock / 3641人閱讀

摘要：彈性盒模型彈性盒子是的一種新布局模式，由容器父元素和項(xiàng)目子元素組成。彈性盒子是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

彈性盒模型

??彈性盒子是css3的一種新布局模式，由容器（父元素）和項(xiàng)目（子元素）組成。

? 彈性盒子是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

? 引入彈性盒模型的目的：提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白區(qū)間。

? 設(shè)置彈性盒子：display:flex或inline-flex; 區(qū)別：flex獨(dú)占一行；inline-flex占據(jù)自己應(yīng)該占據(jù)的位置，有點(diǎn)像inline-block，不支持margin:auto。

容器屬性

?1.flex-direction? 確定主軸和方向

  • row 默認(rèn)，從左到右
  • row-reverse? 從右到左
  • column 從上到下
  • column-reverse 從下到上

? 2.flex-wrap 規(guī)定項(xiàng)目是否換行

  • nowrap 默認(rèn)，不換行
  • wrap 換行，交叉軸從上到下
  • wrap-reverse 換行，第一行在下，交叉軸從下到上

? 3.flex-flow 復(fù)合屬性，flex-direction和flex-wrap組成的復(fù)合屬性

  • row nowrap 默認(rèn)，從左到右不換行

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

  • flex-start 默認(rèn)，主軸起點(diǎn)對(duì)齊
  • flex-end 主軸終點(diǎn)對(duì)齊
  • center 主軸居中對(duì)齊
  • space-between 主軸上項(xiàng)目?jī)啥藢?duì)齊，項(xiàng)目之間間隙平分空白
  • space-around 主軸上的項(xiàng)目?jī)蓚?cè)間隔相等

? 5.align-content 多行項(xiàng)目在交叉抽（與主軸垂直）上的對(duì)齊方式，不要和align-items共存

  • stretch 默認(rèn)，不設(shè)置項(xiàng)目高度的時(shí)候，占滿平分整個(gè)交叉軸
  • flex-start 交叉軸起點(diǎn)對(duì)齊
  • flex-end 交叉軸終點(diǎn)對(duì)齊
  • center 交叉軸居中對(duì)齊
  • space-between 交叉軸上項(xiàng)目?jī)啥藢?duì)齊，項(xiàng)目之間間隙平分空白
  • space-around 交叉軸上項(xiàng)目?jī)蓚?cè)間隔相等

? 6.align-items 單行項(xiàng)目在交叉軸上的對(duì)齊方式

  • stretch 默認(rèn)，不設(shè)置高度（豎直時(shí)）或?qū)挾?水平時(shí))占滿整個(gè)交叉軸
  • flex-start 交叉軸的起點(diǎn)對(duì)齊
  • flex-end 交叉軸的終點(diǎn)對(duì)齊
  • center 交叉軸的中間對(duì)齊
  • baseline 文字基線對(duì)齊

項(xiàng)目屬性

??1.flex-grow 設(shè)置項(xiàng)目的擴(kuò)大比例

  • 0 默認(rèn)，不擴(kuò)大
  • 1 項(xiàng)目擴(kuò)大填滿容器，值為1時(shí)占一份，值為2時(shí)占兩份，不支持負(fù)值

? 2.flex-shrink 設(shè)置項(xiàng)目的收縮比例

  • 1 默認(rèn)，當(dāng)容器寬度不夠時(shí)，項(xiàng)目等比例縮小
  • 0 不縮小
  • 2,3...n 值越大縮小得越多

? 3.flex-basis 設(shè)置項(xiàng)目初始長(zhǎng)度

  • auto 默認(rèn)，項(xiàng)目沒(méi)有設(shè)置寬度的時(shí)候，默認(rèn)內(nèi)容撐開寬度
  • 0 不設(shè)置初始值
  • number 規(guī)定項(xiàng)目的初始長(zhǎng)度

? 4.flex 復(fù)合寫法flex:flex-grow flex-shrink flex-basis

  • auto 相當(dāng)于1 1 auto
  • none 相當(dāng)于0 0 auto
  • 1 相當(dāng)于1 1 0
  • initial 相當(dāng)于0 1 auto

? 5.align-self 多帶帶控制交叉軸一個(gè)項(xiàng)目的對(duì)齊方式

  • auto 默認(rèn)值，繼承父容器的align-items
  • 其他屬性值與align-items一樣

? 6.order 規(guī)定項(xiàng)目在主軸上的排列順序

  • 0 默認(rèn)，根據(jù)項(xiàng)目先后排列
  • 整數(shù)，可為負(fù)值，數(shù)值越小排名越靠前

以上為個(gè)人理解，如有不當(dāng)之處請(qǐng)指正！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1318.html

相關(guān)文章

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評(píng)論0 收藏0

  • 彈性盒模型flex

    摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡(jiǎn)單的說(shuō)一下容器和項(xiàng)目，因?yàn)橹魂P(guān)系容器和項(xiàng)目來(lái)講的個(gè)人理解。它可以設(shè)為或?qū)傩砸粯拥闹担瑒t該項(xiàng)目占據(jù)固定的空間。默認(rèn)值為，表示繼承夫元素的屬性，如果沒(méi)有夫元素，則等同于。一、flex flex是flexible box的縮寫，意為彈性布局； 定義彈性布局 display:flex; box{ display:flex; } 二...

    Gemini 評(píng)論0 收藏0

  • 彈性盒模型

    摘要：彈性盒模型相比傳統(tǒng)的盒模型，可以更加簡(jiǎn)單的實(shí)現(xiàn)各種布局頁(yè)面簡(jiǎn)單舉一個(gè)例子，代碼如下加上廠商前綴，目前使用方式都有三種寫法，舊的，過(guò)度的，新的的屬性假如的改成也能實(shí)現(xiàn)數(shù)字的垂直居中 彈性盒模型相比傳統(tǒng)的盒模型（display+position+float），可以更加簡(jiǎn)單的實(shí)現(xiàn)各種布局頁(yè)面簡(jiǎn)單舉一個(gè)例子，代碼如下 1 2 3 css .row{width:200px;...

    BakerJ 評(píng)論0 收藏0

  • flex布局的溫故學(xué)習(xí)

    摘要：需要注意的是當(dāng)時(shí)設(shè)置布局之后，子元素的的屬性將會(huì)失效。各行向彈性盒容器的中間位置堆疊。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行將會(huì)伸展以占用剩余的空間。 flex的簡(jiǎn)介 在flex的容器中默認(rèn)存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認(rèn)的設(shè)置，不過(guò)我們可以通過(guò)設(shè)置將主軸的方向變成垂直方向，交叉軸變成水平方向。 在一...

    Aldous 評(píng)論0 收藏0

  • CSS的常用單位 %和 vw vh 和 box-sizing：border-box; 和flex

    摘要：一理解號(hào)是中的常用單位，它是相對(duì)于父容器而言的。效果圖利用設(shè)置了的寬代碼二理解這倆個(gè)單位是相對(duì)于視口的大小而定的。效果圖代碼彈性盒布局 一、% 理解： %號(hào)是CSS中的常用單位，它是相對(duì)于父容器而言的。如:一個(gè)父容器的寬是100px,給它的子元素一個(gè)10%，那么子元素的寬就是100px的10% 10px。 效果圖： （利用%設(shè)置了li 的寬）showImg(https://seg...

    lordharrd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<