元素上設(shè)置了display：flex的元素就是彈性容器

彈性子元素：

元素上設(shè)置了display：flex的元素就是彈性容器里面的直接子元素

主軸分布justify-content和側(cè)軸分布align-itemsdisplay:flex" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 前端頁面彈性布局，浮動(dòng)

前端頁面彈性布局，浮動(dòng)

時(shí)間：2023-09-06 21:30:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-06 21:30:01 來源：網(wǎng)站運(yùn)營(yíng)

前端頁面彈性布局，浮動(dòng)：彈性容器：

元素上設(shè)置了display：flex的元素就是彈性容器

彈性子元素：

元素上設(shè)置了display：flex的元素就是彈性容器里面的直接子元素

主軸分布justify-content和側(cè)軸分布align-items

display:flex;justify-content:有以下設(shè)置flex-startflex-endcenterspace-around：平均分布，兩邊都有間距，兩邊的間距是中間的一半space-between：平均分布，兩邊沒有間距space-evenly：平均分布，間距一樣align-items:flex-startflex-endcenterstretch：拉伸，如果子元素沒有設(shè)置高度，就默認(rèn)拉伸到與父元素同樣的高度。如果子元素設(shè)置了高度，那就不拉伸。如果元素很多，會(huì)擠在同一行中，不會(huì)換行?？梢杂玫綋Q行

flex-warp:warp多出來的元素會(huì)換到下一行去。

多行分布 align-content

flex-start

flex-end

center

space-around：和單行分布的意思一樣，平均分布，兩邊有間距，兩邊的間距是中間的一半

space-between：平均分布，兩行沒有間距。

space-evenly：平均分布，間距一樣，這個(gè)在HBuild里沒有提示。。

空間的占據(jù)

比如說網(wǎng)頁上需要一定的比例去占用空間時(shí)，像廣告啥的要占用一個(gè)div的若干份。可以用到Flex:數(shù)字；

一般用在子元素上。

浮動(dòng)Float

浮動(dòng)元素會(huì)尋找父類的邊緣或者是同樣浮動(dòng)的元素的邊緣，然后靠在一起?？梢宰屛淖职鼑鷪D片，也可以讓內(nèi)容向左或者向右排布。

可是有一個(gè)大問題：使用浮動(dòng)以后，父元素高度會(huì)發(fā)生塌陷，原因是使用float的元素會(huì)脫離正常的文檔流，父元素會(huì)找不到子元素，認(rèn)為自己是內(nèi)部沒有元素，所以沒有高度。

解決方法：1、給父元素設(shè)置高度 2、設(shè)置一個(gè)偽元素，這個(gè)方案很完美！下面介紹這個(gè)方案2.

偽元素的代碼如下：

.clear:after{ content: ""; display: block; clear: both; }這個(gè)代碼可以說是萬能代碼，after的后面再創(chuàng)建一個(gè)子元素，設(shè)置這個(gè)假元素為塊級(jí)元素，清除掉左右的浮動(dòng)。content不能少。這個(gè)偽元素設(shè)置在擁有浮動(dòng)的父元素內(nèi)，這樣清除了左右浮動(dòng)后父元素就不會(huì)認(rèn)為自己內(nèi)部沒有元素，擁有高度了。注意，只有class才能同時(shí)設(shè)置多個(gè)class，中間用空格隔開。

<div class = parent clear></div>



關(guān)鍵詞：布局,浮動(dòng),彈性

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉