成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

彈性盒模型，flex布局

CoderDock / 3596人閱讀

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

彈性盒模型

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

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

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

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

容器屬性

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

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

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

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

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

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

? 4.justify-content 項目在主軸上的對齊方式

  • flex-start 默認(rèn)，主軸起點對齊
  • flex-end 主軸終點對齊
  • center 主軸居中對齊
  • space-between 主軸上項目兩端對齊，項目之間間隙平分空白
  • space-around 主軸上的項目兩側(cè)間隔相等

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

  • stretch 默認(rèn)，不設(shè)置項目高度的時候，占滿平分整個交叉軸
  • flex-start 交叉軸起點對齊
  • flex-end 交叉軸終點對齊
  • center 交叉軸居中對齊
  • space-between 交叉軸上項目兩端對齊，項目之間間隙平分空白
  • space-around 交叉軸上項目兩側(cè)間隔相等

? 6.align-items 單行項目在交叉軸上的對齊方式

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

項目屬性

??1.flex-grow 設(shè)置項目的擴大比例

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

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

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

? 3.flex-basis 設(shè)置項目初始長度

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

? 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 多帶帶控制交叉軸一個項目的對齊方式

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1318.html

相關(guān)文章

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

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

    miracledan 評論0 收藏0

  • 彈性盒模型flex

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

    Gemini 評論0 收藏0

  • 彈性盒模型

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

    BakerJ 評論0 收藏0

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

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

    Aldous 評論0 收藏0

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

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

    lordharrd 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<