iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
自我挑戰組

前端轉職學習記錄 系列

中年行政職大叔學習前端紀錄

參賽天數 9 天 | 共 22 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 9

DAY11- CSS 基礎-行高與間距

行高設定 css .line-height-tight { line-height: 1.25; } .line-height-normal { line-he...

2025-09-25 ‧ 由 mabinochi 分享
DAY 9

DAY12- CSS 基礎-尺寸與單位

CSS 單位說明 絕對單位範例 css .absolute-units {/*絕對單位 像素(最常用) */ width: 300px; height...

2025-09-26 ‧ 由 mabinochi 分享
DAY 9

DAY13- CSS 基礎-Flexbox 佈局

Flexbox是一種一維佈局方式,用來分配空間和對齊項目 核心概念 Flex Container (容器):設定display:flex的父元素 Flex...

2025-09-27 ‧ 由 mabinochi 分享
DAY 9

DAY14- CSS 基礎-Flexbox 佈局

方向控制:flex-direction 決定項目的排列方向 水平排列(預設): .flex-row { display: flex;/* 啟用 Fle...

2025-09-28 ‧ 由 mabinochi 分享
DAY 9

DAY15- CSS 基礎-flex-direction完整練習

.container { margin: 20px 0; padding: 15px; background-color:...

2025-09-29 ‧ 由 mabinochi 分享
DAY 9

DAY16- CSS 基礎-Flexbox-換行控制:flex-wrap&簡寫屬性:flex-flow

換行控制:flex-wrap 不換行(預設) css .no-wrap { display: flex; flex-wrap: nowrap; } htm...

2025-09-30 ‧ 由 mabinochi 分享
DAY 9

DAY16- CSS 基礎-Flexbox-主軸對齊:justify-content

靠左對齊(預設) css .justify-start { display: flex; justify-content: flex-start;...

2025-10-01 ‧ 由 mabinochi 分享
DAY 9

DAY17- CSS 基礎-完整主軸對齊範例

css .container { margin: 15px 0; padding: 10px; background-col...

2025-10-02 ‧ 由 mabinochi 分享
DAY 9

DAY18- CSS 基礎-交叉軸對齊:align-items

交叉軸對齊:align-items 控制項目在交叉軸上的對齊方式 拉伸填滿(預設)css .align-stretch { display: flex;...

2025-10-03 ‧ 由 mabinochi 分享
DAY 9

DAY19- CSS 基礎-交叉軸對齊:align-items-2

頂部對齊 css .align-start { display: flex; align-items: flex-start; /*在交叉軸方向(預...

2025-10-04 ‧ 由 mabinochi 分享