網(wǎng)頁筆記—彈性盒子

1. 定義:

彈性盒子是 CSS3 的一種新的布局模式。

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

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

2.屬性:

1.設(shè)置父容器為盒子:會使每一個子元素自動變成伸縮項(xiàng),以適應(yīng)父元素盒子。

當(dāng)子元素的寬度和大于父元素的寬度,子元素會自動收縮

2.justify-content:xxxxx

space-around:將多余的空間平均的分頁在每一個子元素的兩邊 margin:0 auto。 造成中間盒子的間距是左右兩邊盒子間距的兩倍

space-between:左右對齊父容器的開始和結(jié)束,中間平均分頁,產(chǎn)生相同的間距

center:讓子元素從父容器的中間位置開始排列

flex-end:讓子元素從父容器的結(jié)束位置開始排列

flex-start:讓子元素從父容器的起始位置開始排列

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容