CSS || flex筆記

huhud 發布于2019-08-29 12:16 / 1941人閱讀

摘要：五個取值與主軸方向有關默認值左對齊右對齊居中兩端對其，間的間隔距離相等每個兩側的間隔相等，相當于設置左右值相等。默認值為即使存在剩余空間寬度，也不放大。默認值為，表示本來的大小。

Flex布局

Flex是flexible box的簡稱，純粹用來布局的屬性

1 flex和inline-flex

任何容器都可以知道為Flex布局，塊級元素使用display: flex; ；行內元素使用inline-flex

容器使用Flex布局后，子元素的float、clear和verticle-align屬性將失效

2 基本概念

采用Flex布局的元素，稱為flex container容器。容器內的子元素自動成為flex container的成員，稱為flex-item

flex-item的排列方向是main axis：即flex-direction指定主軸是水平或是垂直

容器默認存在水平主軸main axis和垂直的交叉軸cross axis

main axis：flex-item排列的方向是主軸

cross axis：與主軸垂直的是交叉軸

主軸的開始和結束位置：main start和main end

交叉軸的開始和結束位置：cross start和cross end

flex-item在主軸與交叉軸占據的空間：main size和cross size

3 flex container的屬性

需要在flex container上設置的屬性有6個：

flex-direction：row | row-reverse | column | column-reverse。默認值為row

row（默認值）：主軸是水平方向，flex-item水平排列，main start在左端

row-reverse：主軸是水平方向，flex-item水平排列，main start在右端

column：主軸是垂直方向，flex-item垂直排列，main start在上邊沿

column-reverse：主軸是垂直方向，flex-item垂直排列，main start在下邊沿

flex-wrap：nowrap | wrap | wrap-reverse。默認情況下，flex-item都排在一條軸線上；flex-wrap屬性定義如果在一條軸線上排不下，換行的規則。

nowrap（默認值）：不換行

wrap：換行，第一行排在上方

wrap-reverse：換行，第一行排在下方

flex-flow：是flex-direction和flex-wrap的簡寫，默認值為row nowrap

flex-flow: &&

justify-content：定義flex-item在主軸main-axis上的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around。五個取值與主軸方向有關

flex-start（默認值）：左對齊；flex-end右對齊；center居中；

space-between：兩端對其，flex-item間的間隔距離相等

space-around：每個flex-item兩側的間隔相等，相當于設置左右margin值相等。

align-items：定義flex-item在交叉軸的對其方式

align-items: flex-start | flex-end | center | baseline | strecth。五個取值與交叉軸方向有關

flex-start交叉軸起點對其；

baseline：flex-item的第一行文字的基線對齊

stretch（默認值）：如果flex-item沒有設置高度或者值為auto，將占滿整個容器高度

align-content：如果容器內出現多跟軸線（即出現wrap），定義主軸在交叉軸上的對齊方式，只有一根軸線時不起作用

stretch（默認值）：軸線沾滿整個交叉軸

space-between：與交叉軸兩端對齊，軸線間的間隔平均分布

space-around：每根軸線兩側的間隔相等

flex-start：與交叉軸起點對其

4 flex-item的屬性

在flex-item上設置的屬性同樣是6個：

order: ;：定義flex-item在主軸上的排列順序。數值越小，排列越靠前，默認值為0。

flex-grow: ：定義flex-item在主軸上的放大比例。默認值為0：即使存在剩余空間（寬度），也不放大。

如果所有flex-item的flex-grow屬性值都是1，表示它們均分剩余空間（如果有）

如果一個flex-item屬性值為2，其余為1：前者占據的空間是后者的2倍

flex-shrink: ：定義flex-item在主軸上的縮小比例。默認值為1，即如果空間不足，該flex-item會縮小。

如果所有flex-item的flex-shrink屬性值都為1，在空間不足時，都將等比例縮小

flex-shrink為0的flex-item在空間不足時，不會縮小。

flex-basis: | auto：定義在分配剩余空間前，flex-item占據主軸的空間main size。默認值為auto，表示flex-item本來的大小。

瀏覽器根據這個屬性計算是否存在多余空間

如果width和height值固定為絕對長度單位（如350px），該flex-item占據固定空間

flex屬性：是flex-grow、flex-shrink和flex-basis三個屬性的簡寫，默認值為0 1 auto

兩個快捷值：none表示(0 0 auto)；auto表示(1 1 auto)

建議優先使用屬性值，而非先多帶帶寫三個分離的屬性（瀏覽器會自動推算相關值）

align-self：允許單個flex-item與其他flex-item在交叉軸有不同的對齊方式，可以覆蓋掉align-items的值

默認值為auto：表示繼承父元素的align-items屬性

沒有父元素情況下等同于stretch

阮一峰教程Flex布局教程

GPU云服務器云服務器 CSS_Flex flex flex40 flex 教程

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

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

CSS頁面布局筆記

摘要：居中布局水平居中父元素和子元素的寬度都未知優點兼容性好缺點子元素文本繼承了屬性，子元素要額外加優點只需要設置子元素的樣式優點居中子元素不會對其他元素產生影響缺點是的屬性，存在兼容性問題優點只需要設置父元素的樣式缺點兼容性問居中布局水平居中父元素和子元素的寬度都未知 inline-block + text-ailgn .child{display:inline-block;} ...

CoderDock 2019-08-28 18:14 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

frank_fun 2019-08-01 18:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

Aomine 2019-08-29 14:22 評論0 收藏0
CSS Flexbox學習筆記

摘要：本文記錄了我在學習前端上的筆記，方便以后的復習和鞏固。注意項目現在顯示的寬度是他們的默認寬度。各行將會伸展以占用剩余的空間。在其它情況下，剩余空間被所有行平分，擴大各行的側軸尺寸。這不會影響源代碼。不要忘記了，默認情況下，項目的值為。本文記錄了我在學習前端上的筆記，方便以后的復習和鞏固。開始使用Flex 在父元素中的顯式的設置displa...

zzir 2019-08-29 12:21 評論0 收藏0
CSS 小結筆記之伸縮布局 (flex)

摘要：相關的各個屬性如下在父盒子定義，子盒子才能使用屬性設置子盒子的縮放比例，可以一起指定也可以單獨指定。子盒子在父盒子中的水平對齊方式。強行在一行顯示，因此每個盒子的大小都會減少。CSS flex 是一種伸縮布局，之前塊級元素布局在同一行，可以通過display或position或float來實現，而本篇介紹一個新的方法——flex（彈性布局）。 flex 為和模型布局提...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0