頁面布局指用CSS將頁面劃分成不同的內(nèi)容展示古程,區(qū)域以滿足人們對頁面的感官和互動需求芝此。
布局方式又有:
【盒狀模式】:依賴display + position + float 屬性實現(xiàn)搀暑。
【彈性模式】:flex
這里寫下彈性模式 布局冤吨。
瀏覽器兼容性:
在瀏覽器支持的范圍內(nèi)啸驯, 盒狀布局 和彈性布局可以“組合”使用筐带。
注意:設(shè)為 Flex 布局以后,子元素的float寂呛、clear和vertical-align屬性將失效怎诫。
任何容器都可以指定為彈性布局 flex
/* 塊級元素的指定方式 */
.panel{ display:flex; }
/* 行內(nèi)元素的指定方式 */
.panel{ display: inline-flex; }
/* Webkit 內(nèi)核的瀏覽器,必須加上-webkit前綴 */
.panel{ display: -webkit-flex; display: flex; }
容器指定為flex布局后就可以使用下面六個屬性來進行布局:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
下一篇:【連載】flex布局[flex-direction 之 2]