彈性盒子的基礎知識

1.彈性盒是css3的一種新的佈局模式。
2.css3彈性盒,是一種當頁面需要適應不同屏幕大小以及設備類型時確保元素擁有恰當的佈局方式。引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列,對齊和分配空白空間。
3.彈性盒內容
彈性盒子由彈性容器和彈性子元素組成。彈性容器通過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。彈性容器內包含了一個或多個彈性子元素。
注意: 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
4.例如:
1> display:flex;建立子元素彈性佈局,子元素脫離文檔流。使子元素在一行顯示。
direction屬性
2> direction屬性爲rtl(right-to-left),把子元素顯示方向設置爲“從右向左”。flex-direction 屬性指定了彈性子元素在父容器中的位置。
stretch - 默認。各行將會伸展以佔用剩餘的空間。
3>flex-start - 各行向彈性盒容器的起始位置堆疊。flex-end - 各行向彈性盒容器的結束位置堆疊。center -各行向彈性盒容器的中間位置堆疊。space-between -各行在彈性盒容器中平均分佈。space-around - 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。order 屬性設置或檢索彈性盒模型對象的子元素出現的順序。。

發佈了4 篇原創文章 · 獲贊 8 · 訪問量 412
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章