1. 程式人生 > >flex-box

flex-box

ID 屬性 預覽 容器 margin ever 設備 lin 需要

1、文本實現在div中垂直居中

  設置行高和高度一樣即可實現。

2、彈性盒布局  

  CSS3 彈性盒( Flexible Box 或 flexbox),是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。彈性盒子由彈性容器(Flex     container和彈性子元素(Flex item)組成,彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。彈性容器內包含了一個或多個彈性子元素。

  彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行,當彈性容器中包含n多個子元素時,此時子元素設置的width默認失效。

3、使用方式

  將div組件設置成彈性盒:

技術分享圖片

技術分享圖片

技術分享圖片技術分享圖片

技術分享圖片

技術分享圖片

效果圖中的1、2、3、4分別代表一個彈性子元素,下圖為不同屬性的顯示預覽圖:

技術分享圖片

技術分享圖片技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

Nowrap屬性:

技術分享圖片

Wrap屬性:

技術分享圖片

Wrap-reverse屬性:

技術分享圖片

參考:菜鳥教程

flex-box