justify-content(水平), align-items(垂直)

可以針對物件做水平、垂直移動，其參數如下：

  • flex-start: 元素和容器的左端對齊。
  • flex-end: 元素和容器的右端對齊。
  • center: 元素在容器裏居中。
  • space-between: 元素之間保持相等的距離。
  • space-around: 元素周圍保持相等的距離。

須注意如果有使用 reverse 那這兩個參數會相反做操作

space-around

space-between

全置中

1
2
3
display: flex;
justify-content:center;
align-items:center;

justify-contnet, align-items 複合使用

這邊會讓被選取的物件

  • 水平移動成 周圍空間相同
  • 垂直移動成 貼近底部
1
2
3
display: flex;
justify-content:space-around;
align-items:flex-end;

flex-directrion

  • row: 元素擺放的方向和文字方向一致。(預設值)
  • row-reverse: 元素擺放的方向和文字的方向相反。
  • column: 元素從上放到下。
  • column-reverse: 元素從下放到上。

使用row-reverse 之前

使用row-reverse 之後

flex-direction, justify-content 複合使用

1
2
3
display: flex;
flex-direction:column-reverse;
justify-content:space-between;

操作前

為了讓青蛙回到荷葉上

  1. 使用

flex-direction:column-reverse;

讓青蛙

  • 改變順序為 紅黃綠
  • 變成 column 排列
  1. 使用

justify-content:space-between;

讓三個荷葉間的距離相同，這樣它們就回到荷葉上搂

flex-direction, justify-content, align-items 複合使用

讓青蛙回到荷葉上

1
2
3
4
display: flex;
justify-content:center;
align-items:flex-end;
flex-direction:row-reverse;

首先使用

justify-content:center; 水平置中
align-items:flex-end; 垂直讓青蛙對齊底部
flex-direction:row-reverse; 讓青蛙顏色順序修改

order

決定 flex 元素的順序

(-2,-1,0,1,2) 用數字去調整元素的位置

1
2
3
.yellow {
order:1;
} //往右一格移動

使用前

使用後

align-self

另一個你可以使用的控制單個元素的屬性是align-self。這個屬性接受和align-items一樣的那些值。

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch(default)

操作黃色青蛙回荷葉上

1
2
3
.yellow {
align-self:flex-end;
}

order, align-self 複合使用

操作黃色青蛙回荷葉上

1
2
3
4
.yellow {
order:1;
align-self:flex-end;
}

使用

  • order:1 讓黃色青蛙往右更改順序
  • align-self:flex-end; 對齊底部

flex-wrap

  • nowrap: 所有的元素都在一行。
  • wrap: 元素自動換成多行。
  • wrap-reverse: 元素自動換成逆序的多行。

操作三色青蛙回各色的荷葉上

操作

  • flex-wrap: wrap;
    自動分行

  • flex-direction:column;

轉變方向為 column

flex-flow

flex-direction和flex-wrap兩個屬性經常會一起使用，所以有縮寫屬性flex-flow。這個縮寫屬性接受兩個屬性的值，兩個值中間以空格隔開。

1
2
display: flex;
flex-flow:column wrap;

直接達到這個效果

align-content

可以用來決定多行距，以及多行的位置

  • flex-start: 多行都集中在頂部。
  • flex-end: 多行都集中在底部。
  • center: 多行居中。
  • space-between: 行與行之間保持相等距離。
  • space-around: 每行的周圍保持相等距離。
  • stretch: 每一行都被拉伸以填滿容器。

flex-start

center

其他以此類推

align-items, align-content 差異

下面兩張圖展示的效果

  1. align-items: center 只會操作一組 flexbox

  2. align-content:space-around 會針對多組 flexbox 做操作(下圖操作了兩列 flexbox )並且當元素都成一列時會沒有效果他是針對整個架構去做排列

  3. 這是當 align-content: space-around; 對其中一個 flexbox 操作 align-items:center 的展示

flex-direction, align-content 複合操作

操作三色青蛙回各色的荷葉上

1
2
3
4
display: flex;
flex-wrap: wrap;
flex-direction:column-reverse;
align-content:center;

使用

  • flex-direction:column-reverse; 讓行變成列並且更改頭尾順序

  • align-content:center; 這邊因為 reverse 了所以 align-cotent 變成水平移動

超級複合題目 flex-flow,justify-content, align-content

1
2
3
4
display: flex;
flex-flow:wrap-reverse column-reverse;
justify-content:center;
align-content:space-between;

使用

  • flex-flow: column-reverse wrap-reverse ;

column-reverse

行變成列 以及 順序相反

wrap 的效果但不符合要求

使用 wrap-reverse 修改順序右側集成型

  • justify-content:center
    置中全體
  • align-content:space-between;
    最後讓兩排青蛙的距離一樣也就是推到底

就完成摟!