iT邦幫忙

flexbox相關文章
共有 26 則文章
鐵人賽 Modern Web DAY 20
我說那個手機版 系列 第 20

技術 [Day 20] 實際操作 Part 2

從手機版開始 在我們開始講內文之前,我們先來看看天地之間的事情。在昨天的例子中,你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並...

鐵人賽 Modern Web DAY 16
重新認識 Flex 和 Grid 系列 第 16

技術 [Day 16] flexbox order 順序

預設中,彈性項目會以檔案中出現的順序做排列,但如果你想要做到不一樣的順序時怎麼辦呢?這時就可以使用 order 了指定順序。 order .item {...

鐵人賽 Modern Web DAY 15
重新認識 Flex 和 Grid 系列 第 15

技術 [Day 15] flex 屬性: flex-basis

藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...

鐵人賽 Modern Web DAY 16
我說那個手機版 系列 第 16

技術 [Day 16] 這不是 Media Query

Media Query 這件事情應該是講到爛掉了,我們稍微複習一下就好, @media (min-width: 32rem) {} 收工(欸)! 爾或者是...

鐵人賽 Modern Web DAY 14
重新認識 Flex 和 Grid 系列 第 14

技術 [Day 14] flex 屬性: flex-shrink

藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...

鐵人賽 Modern Web DAY 13
重新認識 Flex 和 Grid 系列 第 13

技術 [Day 13] flex 屬性: flex-grow

藉由對彈性項目宣告 flex 縮寫屬性,或是 flex 以下個別的彈性屬性,能夠定義彈性項目在容器中的擴張及壓縮係數。 .item { flex: [...

鐵人賽 Modern Web DAY 12
重新認識 Flex 和 Grid 系列 第 12

技術 [Day12] flexbox align-self

align-self 和 align-items 和 align-content 的關係,屬性大同小異,差別就像是只操控單一個、操控每個單行、操控整體。 sel...

鐵人賽 Modern Web DAY 11
重新認識 Flex 和 Grid 系列 第 11

技術 [Day11] Flexbox 彈性項目

當瞭解完彈性容器的屬性後,接下來就是進入彈性項目的部分,如果你還不了解什麼是彈性容器,可以回顧第四天flexbox基礎 .container { dis...

鐵人賽 Modern Web DAY 10
重新認識 Flex 和 Grid 系列 第 10

技術 [Day10] flexbox align-items

接下來幾個屬性都和對齊有關,其中 align-items 這個屬性擅長於操控"相交軸上彈性項目的對齊位置",也非常適合拿來調整內容。 如果你...

鐵人賽 Modern Web DAY 10
我說那個手機版 系列 第 10

技術 [Day 10] Flexbox 的使用姿勢 Part 4

各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上,最後來一點大補貼。 justify-content 水平方向的對...

鐵人賽 Modern Web DAY 9
重新認識 Flex 和 Grid 系列 第 9

技術 [Day09] flexbox align-content

接下來幾個屬性都和對齊有關,其中 align-content 這個屬性擅長於操控"相交軸上彈性項目的分布",也非常適合拿來調整內容。 如果你...

鐵人賽 Modern Web DAY 8
重新認識 Flex 和 Grid 系列 第 8

技術 [Day08] flexbox justify-content

接下來幾個屬性都和對齊有關,其中 justify-content 這個屬性擅長於操控"主軸上彈性項目的分布",非常適合拿來調整內容。 注意:...

鐵人賽 Modern Web DAY 9
我說那個手機版 系列 第 9

技術 [Day 9] Flexbox 的使用姿勢 Part 3

你所不知道的「補白」 首先,你必須要知道這幾個常用屬性的可用值, 屬性 預設值 可用值 justify-content normal flex-s...

鐵人賽 Modern Web DAY 7
我說那個手機版 系列 第 7

技術 [Day 7] Flexbox 的使用姿勢 Part 1

簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊...

鐵人賽 Modern Web DAY 6
重新認識 Flex 和 Grid 系列 第 6

技術 [Day06] 軸向概念 / flex-direction

軸向 你可能會好奇為什麼學 flexbox 要認識"軸向",但在善於控制一維(上下、左右)的 flexbox 世界,要能控制排列的方向和順序...

鐵人賽 Modern Web DAY 5
重新認識 Flex 和 Grid 系列 第 5

技術 [Day05] Flexbox 彈性容器

.container { display: flex | inline-flex; } 上一篇提到當我們對 container 宣告 display:...

鐵人賽 Modern Web DAY 4
重新認識 Flex 和 Grid 系列 第 4

技術 [Day04] Flexbox 基本認識

Flexbox(彈性盒子),全名 CSS Flexible Box Module Level 1(https://www.w3.org/TR/css-Flexb...

鐵人賽 Modern Web DAY 1
重新認識 Flex 和 Grid 系列 第 1

技術 [Day01] 請問你掉的是 Flexbox 還是 Grid ?

開賽阿!! 工程師轉職的路上,靈魂不小心跌入充滿 code 的洪流裡 . . . 切版之神:「請問你掉的是 Flexbox 還是 Grid ?」 我:「喔沒欸....

鐵人賽 自我挑戰組 DAY 8

技術 Day 8 從 WordPress 看 CSS 樣式:版面配置 (flex)

大家好,我是 Eric。 一般在學習 CSS 的時候,都會從較簡單的樣式開始,例如字型顏色 (color)、字型系列 (font-family) 等。但今天,我...

技術 [鼠年全馬鐵人挑戰] Week 5-網頁排版筆記: 用習慣的 Adobe 對齊物件,理解Flexbox對齊方式

前言 Hi大家,你們在切版時都慣用哪個做排版工具呢?一直以來我都使用Float,對於現在主流的Flex, Grid對我來說算是新的技術,雖然說在我的第三篇文章,...

鐵人賽 Modern Web DAY 12

技術 React Natvie FlexBox 的排版

哇!好不容易打基礎元件介紹完了,接戲來就來介紹 React Native 的排版吧,如果有在關注該系列的朋友,一定有發現我都用了一個 styles.center...

鐵人賽 Modern Web DAY 7

技術 Day 07:Style & Layout

本篇目的 了解 CSS in JS 的起源、現況,還有其在 React Native 中的用法,順便學習一下 Flexbox。 CSS in JS Facebo...

鐵人賽 自我挑戰組 DAY 3
30 天 CSS 隨手筆記 系列 第 3

技術 30 天 CSS 隨手筆記 - 第 03 天 - WTF... Flexbox~!! ( 2 / 3 - 屬性介紹 )

完全無關的前言 昨天發現文章如果寫太長的話,要點擊編輯器的 toolbar 的話,要滑到很上面才能使用,有這麼一點不方便。 因此簡單的寫了一個小書籤,會讓 t...

鐵人賽 自我挑戰組 DAY 2
30 天 CSS 隨手筆記 系列 第 2

技術 30 天 CSS 隨手筆記 - 第 02 天 - WTF... Flexbox~!! ( 1 / 3 - what & why & how )

前言 標題是來自這個 flexbox.io 這個網站的頁首 網路上有非常多的資源了,例如: CSS Flexible Box Layout Module...

鐵人賽 Modern Web DAY 4

技術 Day4 / Basic -- Flexbox

Flexbox <好讀版> 前言 我們一直反覆強調 React Native 的核心價值,就是 Learn once, Write anywhere...

鐵人賽 開發技術 DAY 11

技術 使用Polymer也要顧門面 (Layout)

今日目標: 學習 Polymer Layout各種使用方式 Polymer提供了聲明式的佈局宣告,是基於 CSS Flexbox 建構而成,透過Polymer加...