一、彈性盒子的常用屬性

?1、flex容器：采用flex布局的塊級標簽(div)

2、flex項目：采用flex布局的塊級標簽的子元素

3、排列方向：direction,flex容器的布局方向

4、flex容器的屬性：

(1)flex-direction：布局方向
?? ? ??
?? ? ? ? ? row：默認值，主軸為水平方向(水平布局),起點在左端
?? ??? ? ??
?? ??? ? ? row-reverse：主軸為水平方向(水平布局),起點在右端
?? ??? ? ??
?? ??? ? ? column：主軸為垂直方向(垂直布局),起點在上沿
?? ??? ? ??
?? ??? ? ? column-reverse：主軸為垂直方向(垂直布局),起點在下沿
?? ??? ? ??
?? ??? ?(2)flex-wrap：環繞效果
?? ??? ?
?? ??? ? ? ?nowrap：默認值,表示不換行
?? ??? ??? ?
?? ??? ??? ?wrap：換行
?? ??? ??? ?
?? ??? ??? ?wrap-reverse：換行,第一行在下方
?? ??? ??? ?
?? ??? ?(3)justify-content：對齊方式
?? ??? ?
?? ??? ? ? ?flex-start：默認值,左對齊
?? ??? ??? ?
?? ??? ??? ?flex-end：右對齊
?? ??? ??? ?
?? ??? ??? ?center：居中
?? ??? ??? ?
?? ??? ??? ?space-between：兩端對齊,項目之間的間隔相等
?? ??? ??? ?
?? ??? ??? ?space-around：項目兩側的間距相同,項目之間的間距比兩側的間距大一倍

5、項目屬性(item)

?(1)order：項目的排列順序,數字越小排列越靠前
?? ??? ?
?? ??? ?(2)flex-grow：設置項目的放大比例
?? ??? ?
?? ??? ?(3)flex-shrink：設置項目的縮小比例

6、CSS中的長度單位：

? ? ? ? ? in：英寸

? ? ? ? ? cm：厘米

? ? ? ? ? mm：毫米

? ? ? ? ? px：像素點,相對長度單位,相對于計算機屏幕分辨率

? ? ? ? ? em：相對長度單位，相對于當前對象內文本的字體尺寸

? ? ? ? ? ? ? 任意瀏覽器默認的相對字體高度為16em

? ? ? ? ? ? ? ?12px = 0.75em

? ? ? ? ? ? ? ?10px = 0.625em

? ? ? ? ? pt：磅(1pt = 1/72in)
?? ??? ? ?
?? ??? ?(1)vw、vh、vmin、vmax：是視窗(Viewport)單位，是相對單位，由視窗大小決定.1個單位類似于1%
?? ??? ?
?? ??? ? ? A、vw：視窗寬度的百分比(1vm = 視窗寬度的1%)
?? ??? ? ??
?? ??? ? ? B、vh：視窗高度的百分比
?? ??? ? ??
?? ??? ? ? C、vmin：表示vm、vh中的較小的一個值
?? ??? ? ??
?? ??? ? ? D、vmax：表示vm、vh中的較大的一個值
?? ??? ? ??
?? ??? ?(2)vw、vh和%的區別：
?? ??? ?
?? ??? ? ? A、%是相對于父元素的大小而設定的比例,vw、wh是由視窗的大小來決定
?? ??? ? ??
?? ??? ? ? B、vw、vh可以直接獲取視窗的寬度或高度,%在設置時要根據body的高度的情況，往往無法正確的獲取
?? ??? ? ??
?? ??? ? ? ? ?實際寬度或高度
?? ??? ??? ? ?
?? ??? ?(3)vmin、vmax的用處：
?? ??? ?
?? ??? ? ? ?在開發移動頁面時，使用vw、wh來設置字體的大小，在豎屏、橫屏狀態下顯示的字體大小不一樣
?? ??? ??? ?
?? ??? ??? ?由于vmin、vmain是當前較小或較大的，用來設置字體可以保證在豎屏、橫屏狀態下字體大小一樣

總結

以上是生活随笔為你收集整理的弹性盒子布局flex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。