flex基礎布局詳解

nemo 發布于2019-08-30 15:53 / 1145人閱讀

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。

flex-tutorials

系統性的介紹關于flex布局，也作為自學的一篇文章

flex基礎理念

使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。一個彈性框容器將延展它的子元素以填充可用空間，并且縮小它的子元素來避免溢出。

flex屬性

一個flex布局的頁面所具有的元素可分為2類。
1、彈性容器
2、彈性元素（包含在彈性容器內的元素）

彈性容器

彈性容器擁有橫軸(main)和縱軸(cross)2種方向來決定著整體flex布局的流向，默認布局：橫軸從左(main start)到右(main end)，縱軸從上(cross start)到下(cross end)

圖片來自MDN

彈性容器還有相應的CSS屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

指定了內部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。

可選值有4種
row：默認，保持原布局不變，按照橫軸方向布局，即從左(main start)到右(main end)
row-reverse：按照橫方向布局，置換橫默認方向，即從右(main end)到左(main start)
column： 按照縱軸默認方向布局，即從上(cross start)到下(cross end)
column-reverse：按照縱軸方向布局，置換縱軸默認方向，即從下(cross start)到上(cross end)

demo

注：flex-direction的值即為整個flex布局的主軸，flex-direction:row | row-reverse則于橫軸為主軸，flex-direction:column | column-reverse則于縱軸為主軸，另外的為側軸

flex-wrap

指定 flex 元素單行顯示還是多行顯示。如果允許換行，這個屬性允許你控制行的堆疊方向

可選值有3種
nowrap： 默認，單行顯示，假如寬度溢出，則自動壓縮相應元素的寬度（壓縮比例與flex-shrink相關），保持單行
wrap： 多行顯示，假如寬度溢出，自動換行
wrap-reverse：多行顯示，置換側軸的方向

demo

flex-flow

flex-direction 和 flex-wrap 的簡寫

.class{
    flex-flow: column-reverse wrap;/*默認屬性*/
}

justify-content

屬性定義彈性元素在主軸方向的排列

可選值有5個

flex-start： 默認值，按照主軸方向進行排列
flex-end： 置換主軸方向進行排列
center： 向中點居中排列
space-between： 在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。
space-around：在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。

demo1
demo2

align-items

屬性定義了彈性元素在側軸方向的排列

可選值有5個
flex-start： 默認值，按照側軸方向排列
flex-end： 置換側軸方向進行排列，主軸不變
center： 向中點居中排列
baseline： 所有元素向基線對齊。側軸起點到元素基線距離最大的元素將會于側軸起點對齊以確定基線(不是很明白，MDN上面的解釋)
stretch：拉伸彈性元素，填充側軸空間

demo

align-content

屬性定義了當彈性元素超過一行時，元素在縱軸上的排列方式

可選值有6個
flex-start： 默認值，緊貼前一行，第一行緊貼邊緣，與主軸排列方式有關
flex-end： 置換側軸方向進行排列，緊貼前一行
center： 向中點居中排列，緊貼前一行
space-between： 所有行在容器中平均分布。相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的邊對齊
space-around：所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的距離是相鄰兩行間距的一半
stretch：平均分配側軸空間，相鄰行間距相等

demo

彈性元素

包含在彈性容器里的每個節點都可以稱為彈性元素

相應的，彈性元素也有自身的CSS屬性

order

align-self

flex-grow

flex-shrink

flex-basis

order

彈性元素根據自身order的值來進行排序

demo

align-self

屬性和左右與align-items相同，但由于是直接作用在彈性元素上面，優先級比align-items高

demo

flex-grow

定義彈性元素側軸拉伸因子

demo

flex-shrink

與flex-grow相反，定義彈性元素的壓縮比例，當彈性元素的總長度超過容器長度時，各自的壓縮率(默認是1)

demo

flex-basis

用來代替width，優先級比width高（如果flex-basis和width有一個值為auto，那么另外一個非auto優先級更高）

demo

flex

flex-grow、flex-shrink、flex-basis的縮寫

.flex1{
    flex:none;
    /*
    相當于
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex2{
    flex:1;
    /*
    相當于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex3{
    flex: 1 30px;
    /*
    相當于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 30px;
    */
}

參考來源

MDN
W3C

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116593.html

flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

luodongseu 2019-08-01 16:29 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

RobinQu 2019-08-02 13:55 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可...

Meathill 2019-04-29 15:35 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

Magicer 2019-08-30 15:54 評論0 收藏0