CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

常可以見到在網路上關於 CSS 排版的提問,例如元件在容器內如何橫排、對齊或是自動縮放等問題,而這些問題幾乎都可以使用 CSS Flexbox 來解決,那什麼是 Flexbox 呢?簡單的說就是將容器的 display 屬性設定為 flex,再透過 flex 的相關屬性來決定容器內的元件要如何排版,所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性,如果是 CSS Flexbox 的初學者建議先看 圖解:CSS Flex 屬性一點也不難 這篇文章,因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法,你也可能需要對 flex 屬性有基本的認識,即便是不全,在實際操作該網站後,便可以完全釐清疑問,增加自己對使用 flex 排版的功力。

§相關文章,還可以參閱:

如何使用「CSS Flexbox Generator」產生 CSS 語法?

1.使用瀏覽器進入 CSS Flexbox Generator 網站,預設是容器內有個 Item1 寬度是 62px,而在其下有 Flex Container Properties、Flex Item Properties ,分別就是上述所說的控制外容器及控制內元件的兩個主要類別。

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

2.如果我們希望將原預設變成 3欄式(橫排或直排),也就是容器左側與右側各有一個 62px的 div,中間的 div 可以自動縮放的排版,我們可以如下操作來取得相關的 CSS 語法,首先按[ Add Flex Item ]加入 2個 Item。

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

3.透過 Flex Container Properties,預設式 flex-direction 為 row,可以將其改為 column 方向。 

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

4.接下來滑鼠點擊 Item2,修改 Flex Item Properties 下的 flex-grow property 為 1,使 Item2 可以自動縮放。

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

5.完成後,我們便可以取得 HTML 及 CSS 的相關語法應用到網頁中。

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

6.以上對 flex 的應用只是小菜,至於容器內的元件要如何分布,上下左右要如何對齊,使用者可以搭配 圖解:CSS Flex 屬性一點也不難 這篇文章來一一操作,相信對 flex 會有更深的認識。

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

做網頁、文宣品,如果需要放上企業品牌的 LOGO 圖示,像是 Google 旗下的 YouTube、Google Pay、Photos、Map...等眾多服務的代表圖示或是 Facebook、line、twitter社群網站的分享按鈕圖示時,通常都可以直接到官方網站下載圖示圖檔,然後根據所要的尺寸進行放大或縮小,方法雖可行,卻受限非向量圖檔的因素,品質很難統一。WorldVectorLogo 這個網站提供全球各大知名品牌的 SVG 向量圖示檔,不論對尺寸是要放大還是縮小,都能維持清晰度與一致性,大幅縮短網頁或文宣品的製做工時。

久坐辦公室或受限於環境無法做運動,現在你可以到 Well Workouts 這個網站免費動畫教你如何在有限的環境與時間內,也能很科學的運動, Well Workouts 設計了包含開合跳、伏地挺身、深蹲...等在內的 12個動作項目,一個循環為七分鐘的運動時間,而環境更是簡單,只需要有一把椅子與牆壁就可以,若需要更進階的鍛鍊,也只有 9個動作,時間同為 七分鐘,只需要多準備一個啞鈴即可,運動過程中,有節拍器會幫你數拍子,更有動畫引導,完全不用怕不會或做的不正確。