iT邦幫忙

flexbox相關文章
共有 39 則文章
鐵人賽 Modern Web DAY 23

技術 Flexbox-30天學會HTML+CSS,製作精美網站

以前排版都會使用float、display屬性的block、inline來製作,現在有了Flexbox,幾乎可以解決各種排版需求。 Flexbox是什麼 fle...

鐵人賽 Modern Web DAY 6

技術 [Day 06 - CSS] Flexbox帶你飛,實現多樣化的網頁佈局

為什麼要學 Flexbox ?還沒學習 Flexbox 的我們,想要讓文字段落並排顯示時,只能調整元素的寬度讓它為了適應大小自動換行,這樣實在太不方便了!為了能...

鐵人賽 自我挑戰組 DAY 5
大二萌新的學習紀錄 系列 第 5

技術 Day 5 : HTML - 網頁排版超強神器,CSS Flex到底是什麼?

這篇想和大家聊聊CSS Flex到底是什麼東西 它是個超好用的排版工具,也是它拯救了我 (詳情可看Day 2) 用它來做網頁非常容易達到響應式 因為它有極強大的...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06:專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex

昨天講完的CSS的文字和區塊屬性後,今天要接續介紹版面佈局的屬性,以及一個非常好用的佈局容器 - Flex,上完這堂課,你的網頁佈局就可以更加彈性囉~ 那麼,我...

鐵人賽 Modern Web DAY 11

技術 #11 CSS3 Flexbox: RWD

How do RWD control columns displaying on devices of different pixels ? First of...

鐵人賽 Modern Web DAY 5

技術 DAY5 速談flex gride布局、定位、響應式

為了加快進度,我要快速帶過flex、gride布局、定位和響應式,幫你繫個安全戴,要飆車囉~~ flex : 學習方法→邊玩蛙蛙回家,邊看連結2的說明 遊...

鐵人賽 Modern Web DAY 10

技術 #10 CSS3 Flexbox: nav style setting

What is nav? nav = navagator “The <nav> HTML element represents a sectio...

鐵人賽 Modern Web DAY 5
CSS Flex/Grid Layout Modules 系列 第 5

技術 [CSS] Flex/Grid Layout Modules, part 5

數學不會背叛你,數學不會就是不會。 我現在寫三角函數都是去 Google 的,不要問。注意!本篇可能會出現大量的加減乘除,如有出現頭暈目眩、噁心想吐、手腳冰...

鐵人賽 Modern Web DAY 9

技術 #9 CSS3 Flexbox: main style setting

What is Flexbox? Flexbox = Flexible Box "CSS3 Flexbox was designed as a o...

鐵人賽 Modern Web DAY 4
CSS Flex/Grid Layout Modules 系列 第 4

技術 [CSS] Flex/Grid Layout Modules, part 4

Media Query 已經快被講爛了。 我不確定現在是否還流行 RWD 這件事情,如果以 Core Web Vitals 來看,你可能會被建議減少未使用的...

鐵人賽 Modern Web DAY 3
CSS Flex/Grid Layout Modules 系列 第 3

技術 [CSS] Flex/Grid Layout Modules, part 3

結果我真的兩篇就快講完了(驚恐)。 既然是說要講切版的話,還是多少交代一些比較基礎的東西好了。 Flex 的軸流向與留白 之前我們提及了多數 CSS 框架的...

鐵人賽 Modern Web DAY 2
CSS Flex/Grid Layout Modules 系列 第 2

技術 [CSS] Flex/Grid Layout Modules, part 2

本篇會有不少冷門範例。 其實我覺得很奇妙,就是我老是踩到一些超冷門連 Google 都找不太到的雷。 Flexbox 能與不能 首先還是得叮嚀一下,如果使...

鐵人賽 Modern Web DAY 1
CSS Flex/Grid Layout Modules 系列 第 1

技術 [CSS] Flex/Grid Layout Modules, part 1

萬事起頭難,只要不起頭,就一點都不難了。 在這個充滿著 CSS Frameworks 的年代,人人有功練,人人有版切,身為老屁股的我只能在沙灘上曬乾,而且還...

鐵人賽 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...