Skip to content

Latest commit

 

History

History
272 lines (183 loc) · 5.72 KB

css-flexbox-note.md

File metadata and controls

272 lines (183 loc) · 5.72 KB
Raw

CSS Flexbox

Basic

Flex 意為彈性的布局，舉例來說:

.box {
    display: flex;
}

.box-inline {
    display: inline-flex;
}

外層會有一個 container (flex-container)，以及內部的 items (flex-item)

我們先將 container 設為一個 flex

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>

css class setting

.container {
    display: flex;
}
.item {
    border:1px solid #000;
    height: 60px;
    text-align: center;
    line-height: 50px;
}
.item1{
    width: 100px;
    background: #FF8888;
}
.item2{
    width: 200px;
    background: #9999FF;
}
.item3{
    width: 300px;
    background: #33FFAA;
}
.item4{
    width: 400px;
    background: #888888;
}

flex 會將畫面依照 item 的比例均分

flex01

但假如每個 item 沒有給予寬度，就會使用內容長度而已

flex02

外層 container 屬性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items

flex-direction

flex-direction 是用來控制主軸的方向，有四種設定可以調整，預設會是 row ，會是剛剛看到的排列方式。

.container {
    flex-direction: row | row-reverse | column | column-reverse | inherit;
}

flex-direction: row-reverse

flex03

flex-direction: column

使用 column 的方式排列，每個 item 會是本來定義的大小

flex04

假如沒有定義寬度，那預設就會整個撐滿

flex05

flex-direction: column-reverse

flex06

flex-wrap

這個屬性用來設定超出範圍的時候，需不需要換行。預設會是 nowrap ，這在最預設 row 的情況下會直接平分寬度，就不會是實際 item 的寬度。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse | inherit;
}

先以 flex-direction: row 為範例

flex-wrap: nowrap

flex01

flex-wrap: wrap

使用 wrap 的時候，會使用 item 實際的寬度，當超出範圍就會往下換行。

flex07

flex-wrap: wrap-reverse

一樣是會使用本來寬度，只是當超出範圍的時候會往"上"換行。

flex08

flex-flow

即為 flex-direction + flex-wrap

用法：

.container {
    flex-flow: {flex-direction} {flex-wrap};
}

以前面的例子舉例

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

就可以寫成

.container {
    display: flex;
    flex-flow: row wrap;
}

justify-content

這個屬性，會是根據主軸 flex-direction 來做水平的對齊，因此如果 direction: column 就會變成是做垂直的對齊。

有以下幾種設定可以使用

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

在以下的例子，先把 item4 拿掉，讓剩下三個 item 加總寬度不滿螢幕寬

justify-content: flex-start

flex-start 是預設值，item 會從左到右開始排列

flex09

justify-content: flex-end

flex-end 也就是會貼齊右邊

flex10

justify-content: center

center 也就是置中對齊

flex11

所以只要當 direction 為 column 的時候，就可以輕易做到垂直置中對齊。注意的是這裡的 container 必須要有 height (250px)

flex12

justify-content: space-between

代表平均在 item 中間有 space 隔開

flex13

相對的如果是 direction 為 column 時，一樣能垂直平分

flex14

justify-content: space-around

space-around 跟上一個的差別就是 item 會被 space 包圍平分

flex15

align-items

這個屬性是用來設定垂直於主軸的“Cross axis”(交錯軸)，剛好是與 flex-direction 相反的。

.container {
    align-items: flex-start | flex-end | center | stretch | baseline;
}

先以 flex-direction: row 為基礎來看，將 item 設定一下高度

.item1{
    width: 100px;
    height: 50px;
    background: #FF8888;
}
.item2{
    width: 200px;
    height: 100px;
    background: #9999FF;
}
.item3{
    width: 300px;
    height: 150px;
    background: #33FFAA;
}

align-items: flex-start

此為預設的屬性，也就是在垂直(因為現在是 row，所以他的 cross axis 就會是垂直的)的部分會從開始點往下。

flex16

align-items: flex-end

也就是相對於前一個，從 end 開始

flex17

align-items: center

垂直至中

flex19

align-items: stretch

在 item 不設定自己的寬度 / 高度之下，這個屬性會將所有 item 撐到跟 container 一樣寬(高)

flex18

Reference