Flex布局的基本語法

應用在父元素上-flex box

1. 模型

display: flex(盒子模型)

定義父元素為flex元素

2. 方向

flex-direction (子元素的排列方向)

  • row (默認值): 從主軸起點到到主軸終點
  • row-reverse: 從主軸終點到主軸起點
  • column: 從側軸起點到側軸終點
  • column-reverse: 從側軸終點到側軸起點

3. 換行

flex-wrap(子元素在主軸上鋪滿時,是否換行)

  • Nowrap(默認值): 不換行
    Flex容器能容納所有的子元素(Flex項目)排列,即使瀏覽器出現了水平滾動條(當Flex容器中添加了很多個Flex項目,至使Flex容器的寬度大于視窗寬度)。
  • Wrap:換行且從頂部到到底部排列
  • Wrap-reverse:換行且從底部到到頂部排列
    當你希望Flex容器內的Flex項目達到一定數量時,能換行排列。
    當Flex容器中沒有足夠的空間放置Flex項目(Flex項目默認寬度),

4. 組合 方向 換行

flex-flow(默認值 Flex-flow: row nowrap;)

flex-flow : flex-direction flex-wrap

5. 水平對齊

justify-content(沿著主軸對齊,分配剩下多余的空閑空間)

  • flex-start (默認值): flex項目從主軸起點開始無空閑空間地排列在一起
  • flex-end: flex項目從主軸終點開始無空閑空間地排列在一起
  • center: flex項目排列在主軸中間,兩邊空閑空間均勻分批
  • space-between: 在主軸上的空閑空間均勻地分配到每兩個flex項目中間
  • space-around: 在主軸上每個flex項目兩邊都分配一樣的空間

6. 垂直對齊

align-items(側軸對齊方式)

  • stretch (默認值):把所有的元素伸開,所有flex項目的高度以最高的flex項目為準
  • flex-start: 在主軸上排列的flex項目頂部,對齊側軸的起點
  • flex-end: 在主軸上排列的flex項目底部,對齊側軸的終點
  • center: 在主軸上排列的flex項目中部,對齊側軸的中間
  • baseline: flex項目沿著自己的基線對齊

7. 多行垂直對齊

align-content(當出現多行flex項目時,側軸方向對齊方式)

  • stretch (默認值): flex盒子和flex項目沒設置高度時,盒子高度以高度最高的flex項目為準
  • flex-start: 多行flex項目頂部對準側軸起點
  • flex-end: 多行flex項目底部對準側軸終點
  • center: 多行flex項目中部對準側軸中間,空閑空間均勻分配打破多行flex項目兩邊
  • space-between:側軸方向上,空閑空間均勻分配到每兩行flex項目的中間
  • space-around: 側軸方向上,空閑空間均勻分配到每行flex項目的兩邊

應用在子元素-flex項目

1.排序

Order(排序)

  • 默認情況下,所有Flex項目的order值都是0
  • 可以正負值,設置子元素排列的先后順序號
  • 如果兩個以下Flex項目有相同的order值時,Flex項目重新排序是基于HTML源文件的位置進行排序。

2.伸展

flex-grow(伸展)

  • 默認情況下,flex-grow屬性值設置為0。表示Flex項目不會增長,填充Flex容器可用空間。表示flex-grow屬性沒有使用。
  • 如果只有一個子元素設置了flex-grow的值,則這個子元素分配剩下的所有的空閑空間。如果你試著調整你瀏覽器的大小,Flex項目也會放大,以適應新的屏幕寬度。
  • 如果多個子元素設置了flex-grow的值,則按照值的比例來分配剩下的空閑空間。

3. 收縮

flex-shrink(收縮)

  • 默認情況下,flex-shrink的值是1,也就是說flex-shrink開關也是打開的。
  • 如果你試著調整你瀏覽器的大小,Flex項目也會放大,以適應新的屏幕寬度。
  • 按照子元素設置的flex-shrink值,來按比例收縮flex項目。

4. 初始寬度

flex-basis(初始寬度)

  • 指定flex項目的初始寬度大小,可以是比例也可以是長度單位。
    默認的值是auto。
  • flex-basis可以取任何用于width屬性的任何值。Flex項目寬度的計算是基于內容的多少來自動計算(很明顯,加上了padding值)。
  • 這意味著,如果你增加Flex項目中的內容,它可以自動調整大小。
  • 然而,如果你想將Flex項目設置一個固定的寬度,現在Flex項目的寬度受到了限制。
  • 值為0,內容不考慮周圍的額外空間。
  • 注意:如果flex-basis屬性的值是0時,也需要使用單位。
    即flex-basis: 0px不能寫成flex-basis:0

5. 垂直位置和垂直伸展

align-self(控制單個flex項目側軸的位置和高度)

  • auto
    是將目標Flex項目的值設置為父元素的 align-items值,或者如果該元素沒有父元素的話,就設置為 stretch。繼承父元素的 align-item 值。
  • flex-end
    將目標項目(Flex項目)對齊到Cross-Axis的末端。
  • center
    將目標項目(Flex項目)對齊到Cross-Axis的中間。
  • stretch
    會將目標項目拉伸,以沿著Cross-Axis填滿Flex容器的可用空間(Flex項目高度和Flex容器高度一樣)。
  • baseline
    將目標項目沿著基線對齊。它與flex-start的效果看起來是一樣的,不過我相信你理解了基線是什么。因為前面已經解釋過。

6. 組合 膨脹 收縮 初始寬度

flex:flex-grow flex-shrink flex-basis

  • flex:0 1 === flex: 膨脹 收縮 (無值時,默認為0)
    flex默認屬性值以及所有的Flex項目都是默認行為
    不伸展,會收縮
  • flex:0 0 auto === flex:none
    試著縮放一下瀏覽器,你會注意到彈性項目不會收縮其寬度。它們從父元素中突出來了,要看到所有內容,必須橫向滾動瀏覽器。
  • flex: 1 1 auto === flex: auto
    還是按我前面立的規矩。即,自動計算初始化寬度,但是如果有必要,會伸展或者收縮以適應整個可用寬度。
    此時,項目會填滿可用空間,在縮放瀏覽器時也會隨之收縮。
  • flex: 2 1 0 === flex: 2
    2 表示任何正數

絕對項目 相對項

1. 絕對項目

Flex:膨脹寬度 收縮寬度
如果你只設置了flex-grow和flex-shrink值,flex-basis可能是默認值0。這就是所謂的絕對flex項目。

2. 相對項目

Flex:膨脹寬度 收縮寬度 初始寬度
只有當你設置了flex-basis,你會得到一個相對flex項目。

3. 絕對和相對Flex項目之間到底有啥區別

二者之間主要的區別在于間距及如何計算間距。

  • 絕對Flex項目中,只根據 flex 屬性來計算,而不是內容。
    flex-basisi:0
  • 一個相對Flex項目內的間距是根據它的內容大小來計算的。
    flex-basis:auto

Margin:auto的作用

1. 使用margin:auto

第一個Flex項目使用margin:auto;前后
當在Flex項目上使用 margin: auto 時,左、右l兩邊會占據所有剩余空間。
讓一個Flex項目的兩邊都用自動外邊距對齊
margin-left: auto;
margin-right: auto;

2.Justufy-content屬性什么時候不起作用

當在一個Flex項目上使用自動外邊距(margin: auto)時,justify-content 屬性就不起作用了。
當用 flex-direction: column 時
項目的寬度填滿了空間

1. 高度

Flex(膨脹寬度、收縮寬度、初始寬度)屬性變成了(高度)
本質上,每個作用于橫向軸(即Main-Axis)上的 flex 屬性,現在都會作用于縱向上的新Main-Axis。它只是在方向上的一個切換。
影響Main-Axis的每一個屬性現在會影響新Main-Axis。像 flex-basis 這種會影響Main-Axis上Flex項目寬度的屬性,現在會影響項目的高度,而不是寬度。

2. 位置

Main-Axis是從上到下,Cross-Axis是從左到右。
Justify-content(水平位置)變成(垂直位置)
justify-content: center;flex項目垂直居中了
Align-items(垂直位置)變成(水平位置)
align-items: center;Flex項目已經水平居中了

瀏覽器bug

在有些瀏覽器中,會有一個 bug,允許Flex項目收縮后比其內容尺寸小。這是個很古怪的行為。

解決這個 bug 的變通方案是把 flex-shrink 的屬性值設置為 0,而不是默認值 1,同時,把 flex-basis 屬性設置為 auto。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 應用在父元素上-flex box 1.模型 方向 換行 display: flex(盒子模型) 定義父元素為fle...
    林立鎮閱讀 3,406評論 0 27
  • Properties for the Parent(應用在父元素上) (flex 盒子) display: fle...
    林立鎮閱讀 335評論 0 0
  • 移動開發基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,512評論 0 6
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,614評論 0 26
  • 今天是執行假期計劃第二天,早上吃完早飯我便開始寫寒假作業,遵照媽媽的“指示”,英語作業圓滿完成,僅剩語文寒...
    葬心R閱讀 172評論 0 0