彈性盒布局

whatsns 發(fā)布于2019-08-29 16:13 / 1752人閱讀

一、彈性布局

彈性布局，又稱“Flex布局”

1、彈性布局的使用

給父容器添加display: flex/inline-flex;屬性，即可使容器內(nèi)容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式

容器添加彈性布局后，僅僅是容器內(nèi)容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流；

display:flex; 容器添加彈性布局后，顯示為塊級元素；

display:inline-flex; 容器添加彈性布局后，顯示為行級元素；

設(shè)為 Flex布局后，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

代碼如下：

效果圖：

GPU云服務(wù)器云服務(wù)器盒遙控盒模型 -沙盒路徑光盤存儲盒

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113608.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 2019-08-30 14:01 評論0 收藏0
彈性盒布局

一、彈性布局彈性布局，又稱Flex布局 1、彈性布局的使用給父容器添加display: flex/inline-flex;屬性，即可使容器內(nèi)容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式容器添加彈性布局后，僅僅是容器內(nèi)容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流； display:flex; 容器添加彈性布局后，顯示為塊級元素； display:inline-fle...

leanxi 2019-08-02 11:05 評論0 收藏0
彈性盒布局實例

摘要：今天給大家搞一個彈性盒布局的實例，最近一直在復(fù)習(xí)一些基礎(chǔ)的東西，所以一直會跟大家分享一些基礎(chǔ)的東西說實話，最近感覺被掏空了，別問我為什么，誰去保健誰知道，哈哈，注意安全，好了步入正題，今天用彈性盒寫了一個小例子，關(guān)于彈性盒的一些基礎(chǔ)我就不列　　今天給大家搞一個彈性盒布局的實例，最近一直在復(fù)習(xí)一些基礎(chǔ)的東西，所以一直會跟大家分享一些基礎(chǔ)的東西　　說實話，最近感覺被掏空了，別問我為什么，誰去保...

wenshi11019 2019-04-23 13:20 評論0 收藏0
彈性盒模型，flex布局

摘要：彈性盒模型彈性盒子是的一種新布局模式，由容器父元素和項目子元素組成。彈性盒子是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健椥院心Ｐ???彈性盒子是css3的一種新布局模式，由容器（父元素）和項目（子元素）組成。 ? 彈性盒子是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?? 引入彈性盒模型的目的：提供一種更加有效的方式...

CoderDock 2019-04-23 11:54 評論0 收藏0
flex布局的溫故學(xué)習(xí)

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

Aldous 2019-08-30 11:12 評論0 收藏0