iT邦幫忙

flexbox相關文章
共有 51 則文章
鐵人賽 Modern Web DAY 28

技術 Day28 FlexBox 彈性盒子

基本概念 主軸和交叉軸 Flexbox 容器有兩個重要的軸,即主軸和交叉軸。主軸是 Flexbox 排列元素的主要方向,而交叉軸是與主軸垂直的方向。 主軸對齊...

鐵人賽 Modern Web DAY 19

技術 #18 CSS Flex 彈性盒子:網頁排版的超級寵兒

↓ 今日學習重點 ↓ 了解 Flex 的主軸線與交錯軸、flex-wrap(容器) 了解 flex-grow、flex-shrink、flex-ba...

鐵人賽 SideProject30 DAY 14

技術 Day14. 切版前知識(四) CSS進階屬性:Flexbox、transition、transform和更多

先祝大家中秋節快樂!雖然是休假,但鐵人賽不能休息啊嗚嗚不管怎麼說,還是趕快進入今天的內容吧~昨天談到CSS的基本認識並介紹了選擇器、常用屬性,忘記的記得回去看。...

鐵人賽 自我挑戰組 DAY 10

技術 Bootstrap 格線系統與Flex Box之運用(一)

flex不管在排版上還是對齊上都可以快速方便地實踐,而且bootstrap像是格線系統或是很多元件都有使用到flex,這一篇我們就來學bootstrap 的Fl...

鐵人賽 Modern Web DAY 7

技術 【Day07】前端撰寫(4)CSS Flex屬性 ,並使用Flex做一個簡單頁尾(Footer)

在本篇中,我們將介紹CSS中的flex。如同它的名字flex般,這個屬性非常具有彈性,有著能夠適應各個網頁縮放比例的自適應能力,可以說是我們在做網頁設計中的排版...

技術 [快速入門前端 35] Flex Box 彈性盒子

Flex Box flex box,又稱彈性盒子,是一種為了讓網頁適應不同尺寸的設備所衍伸出來的 display 方式。在 flex 出現之前,我們大多利用元素...

技術 淺談 start, flex-start, self-start 在 flexbox 排版上的差異

我在學習 flexbox 時,發現有好多容易混肴的排版屬性值,例如: start, flex-start, self-start 在 Chrome 的...

鐵人賽 自我挑戰組 DAY 9

技術 Day 9:我的 Flex Box呢?【Tailwind – Flex Box篇】

前一天講完了 container 容器,必不可少要來我們的排版神器,flex box! 本篇對於 flex box 的描述僅針對筆者使用過的功能進行實作哦,讓我...

鐵人賽 Modern Web DAY 8

技術 Day8 - 保持彈性 (flexbox)

彈性喵喵相簿接下來是重頭戲了,帶著爺爺一起學習吧。 格式化上下文 (formatting contexts) 有時候看著房間裡東西越來越多,收納就會變成一個耗...

技術 2022 鐵人賽|Day8 【CSS】排版寵兒 Flexbox - 下篇

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 接續上篇~~ 主題筆記 三、放在 Flex items...

技術 2022 鐵人賽|Day7 【CSS】排版寵兒 Flexbox - 上篇

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 Day 6 介紹了經典的三大 display,接者就來整理...

鐵人賽 Modern Web DAY 4

技術 Day 4 - CSS 彈性盒子 (Flexible Box) 的優點

剛開始的規劃,是設計一列中有四個項目區塊排列的基本佈局。 圖 a: Slider 基本佈局 既然在前文提到,<div> 元素中使用 display:...

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