CSS Flexbox 新手入門教學 — 登入介面實戰

前言

看完CSS Flexbox 新手入門教學 — 基礎語法&觀念之後，接著我們要試著透過實戰更熟悉Flexbox，在這個實戰中我們只專注Flexbox排版，故一開始會將顏色、字體等CSS設置好。

設計圖

完整的成果程式碼可以在 我的CODEPEN找到

設計圖

事前分析

事前我們可以先分析一下大概會有幾個Element，如UI分析圖可以看到我們的登入介面容器為Class=”container”的DIV，接著由外而內分析。

UI分析

實戰

接著我們從這個CODEPEN開始實戰，可以看到一開始排版歪七扭八的。

初始圖

1.將container水平、垂直置中

要將container水平、垂直置中非常簡單，我們container的父容器為body，故需要先將body的display設置為flex，接著主軸(justify-content)及副軸(align-items)都設定置中對齊，粗體為此次新增的CSS。

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  background-color: #1D1E23;
  display: flex;
  justify-content: center;
  align-items: center;
}

1.將container水平、垂直置中

2.將container內元素水平置中對齊

接著我們要將container內的logo與表單水平置中對齊，首先將.container的display設置為 flex; 。

接著我們.container的方向為由上到下，所以將flex-direction設置為 column;

因為我們更改了flex-direction為column，所以我們的副軸為橫向的，要將logo與表單置中需要更改副軸的對齊align-items: center;

.container {
  width: 300px;
  height: 330px;
  background-color: #100e0f;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

2.將container內元素水平置中對齊

你可能會發現，為什麼中間輸入帳密的input沒有水平置中對齊呢？這是因為我們目前置中的是form，下一步才要將form內的元素水平置中對齊。

3.將form內元素水平置中對齊

跟步驟2很像，先將form的display設置為flex。

接著因為form內的輸入框、按鈕都是從上到下排序的，因此將flex-direction設置為 column;

最後因為我們主軸為上至下，副軸為左至右，因此要將表單內元素水平置中對齊的話就是將元素擺置副軸中央，故將 align-items設為 center;

.form {
  height: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

3.將form內元素水平置中對齊

結語

恭喜你已經利用Flexbox實戰出一個登入介面，這個練習全部都是用Flexbox排版而成，接著找更多想要練習的介面來試試看吧！