彈性盒子是 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:讓子元素從父容器的起始位置開始排列