空間佈局屬性說明

閱讀時間約 1 分鐘

1.justify-content

用來控制主軸(水平)如何分配對齊

如果要改垂直對齊的話+上 flex-direction : column


2.align-item

他是控制子項目再交叉軸(垂直)的對齊方式


3.flex-shrink

收縮性! 當空間不足時預設會是1,等於是把子項目變短,縮起來

可以看這個範例會更清楚 :


4.flex-grow

子元素「伸展」比例分配:數字,無單位,預設值為 0,不可為負值。

flex-grow 尚未進行設定時,不會將剩餘空間分配給子元素做長度「伸展」,設定為 1 長度會進行彈性變化。分配的比例會依照設定的數值進行配置

可以看這個範例會更清楚 :


    avatar-img
    3會員
    17內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    郭欣玫的沙龍 的其他內容
    如果製作一個RGB色碼轉換器,算是考驗操作DOM! 那把它分成三個目標來依序完成, 抓slider的數字,存放在各個滑塊右邊的小格子 透過 slider.addEventListener("input", function (event) {...}) 監聽滑塊變動事件。 當事件被觸發時,取得
    以下展示三種置中方法 : <div class="method-container"> <div class="method-title">Flexbox</div> <div class="box"> <div class="dot"></div> </div> </di
    一般而言,組件之間的資料傳遞,可以使用 props 來達成,不過一旦層級過多的時候,props 就要逐層向下傳遞,會越來越麻煩且複雜。 而 provide、inject 可以解決這個問題,它可以提供一個「源頭」,子組件們可以藉由同一個源頭取得對應的資料,且沒有層級分別,都可以取得,就不用逐層傳遞資
    當 父組件 有數據想傳送到 子組件 就可以使用props 1​. 父層傳遞設置 可以在父組件的屬性給予一個值,當作要傳送到子組件的資料。 父層組件​ : <!-- App.vue (父組件) --> <template> <div> <ChildComponent greetin
    CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
    今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時,預設會套用position:static,但如果你去設定了top, bottom, left, ri
    如果製作一個RGB色碼轉換器,算是考驗操作DOM! 那把它分成三個目標來依序完成, 抓slider的數字,存放在各個滑塊右邊的小格子 透過 slider.addEventListener("input", function (event) {...}) 監聽滑塊變動事件。 當事件被觸發時,取得
    以下展示三種置中方法 : <div class="method-container"> <div class="method-title">Flexbox</div> <div class="box"> <div class="dot"></div> </div> </di
    一般而言,組件之間的資料傳遞,可以使用 props 來達成,不過一旦層級過多的時候,props 就要逐層向下傳遞,會越來越麻煩且複雜。 而 provide、inject 可以解決這個問題,它可以提供一個「源頭」,子組件們可以藉由同一個源頭取得對應的資料,且沒有層級分別,都可以取得,就不用逐層傳遞資
    當 父組件 有數據想傳送到 子組件 就可以使用props 1​. 父層傳遞設置 可以在父組件的屬性給予一個值,當作要傳送到子組件的資料。 父層組件​ : <!-- App.vue (父組件) --> <template> <div> <ChildComponent greetin
    CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
    今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時,預設會套用position:static,但如果你去設定了top, bottom, left, ri
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    天使塔羅牌的水牌是以海,人魚,聖盃的元素組合。 水屬性的塔羅牌主要是顯示人的內心狀態 關於想法.行為.環境.情緒.狀態的部分 主要重點如下: 一.發自內心 二.不易改變 三.沉積已久 就像是習慣一樣很難被影響! 再來從海水的變化來看 1.水面上波濤洶湧 環境的不穩定造成想法.行為
    站內頁面的優化是提高網站SEO排名的關鍵步驟之一。這些調整可以幫助Google更好地理解您的網站內容,提高搜索結果中的可見性,並為讀者提供更好的用戶體驗。因此,確保每個網頁的標題、中繼說明、H標籤和圖片ALT屬性都經過適當的優化是至關重要的。
    Thumbnail
    台北行天宮是許多民眾的信仰中心,來這邊除了求籤收驚外,在周邊也有許多在地巷內的美食,不論是天下第一攤的花生甜湯,還是有台北最強路邊攤之稱的不老麻糬,都相當美味,拜拜完安心後不妨也來安個五臟廟,為行天宮參拜之旅畫下一個完美句點吧!
    Thumbnail
    直接點,免下載聽小倉鼠podcast: 《你怎麼過今天,就怎麼過今生》 **************************** 🎯PODCAST節目名稱:【社畜逃脫筆記】🎯 歡迎在apple podcast及spotify各大平台搜尋+訂閱 【本集主題】 :如何改變和創造更好的人生? ⭐️ 你
    Thumbnail
    書名:重生炮灰大翻身 作者:小碩鼠5030 版區:原創言情 世界背景【自分類】:現代 主題分類【自分類】: 關鍵字【自分類】:重生、逆襲、種田、校園 評分【滿分5顆星】:2.5顆星 心得: 此文一開頭就道出了很多婆媳不合的憋屈婚姻生活,相親結婚通常只能看到表象,尤其是很多時候只相信媒婆的一張嘴。如果
    Thumbnail
    故事是設定在十四世紀的法國,以當時流行的黑死病為歷史背景作為依據的遊戲,是一款動作冒險解謎類型遊戲。玩法上依然是承襲第一代『瘟疫傳說:無罪』而做出延伸發展。劇情上主角姊弟倆人逃離宗教裁判所的追殺後,這次又要面對全新的挑戰!! (本篇文章將會有微量劇情雷,建議可先玩過再來閱讀) 在這次的故事當中,可以
    Thumbnail
    韓劇(2020)。 幾位醫生笑容滿面地從院長室走出,院長對閔科長說腦神經中心往後就拜託他了。閔科長笑稱才要請他多多關照,雖然只有幾天的時間,但整個團隊的實力堅強,體系也很健全,反而是他應該感謝他;跟著側身對頌和說往後就麻煩她了,她微笑點頭。 閔科長邀約眾人去餐廳用餐,院長室只剩下院長及頌和。院長邊倒
    Thumbnail
    蕨類(Platycerium)是世上最原始的植物,鹿角蕨是其中一個比較有特色的"活化石",很多人喜歡把它製作成掛牆裝飾品。認識鹿角蕨生長習性,了解其種植和繁殖方法。
    青年署U-start計畫不僅結合學校育成輔導資源,提供青年創業實質補助及陪伴輔導,協助青年學生創業實踐,此次更納入企業誠信課程及議題交流,鼓勵青年朋友勇於挑戰,大膽創新之際,亦能於經營層面融入誠信思維,建構誠信文化,以全方位提升公司競爭力,達成永續發展目的。
    Thumbnail
    隨著愛滋抗病毒療法(Antiretroviral Therapy,ART)的出現與進步,已經讓『愛滋病毒』與病患長期和平共處。「愛滋的慢性化」仰賴長期穩定服藥控制、回診追蹤與身心照顧,主動與醫療團隊配合與溝通,勇敢為自己爭取最適合的治療與生活品質,是病患的重要課題!
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    天使塔羅牌的水牌是以海,人魚,聖盃的元素組合。 水屬性的塔羅牌主要是顯示人的內心狀態 關於想法.行為.環境.情緒.狀態的部分 主要重點如下: 一.發自內心 二.不易改變 三.沉積已久 就像是習慣一樣很難被影響! 再來從海水的變化來看 1.水面上波濤洶湧 環境的不穩定造成想法.行為
    站內頁面的優化是提高網站SEO排名的關鍵步驟之一。這些調整可以幫助Google更好地理解您的網站內容,提高搜索結果中的可見性,並為讀者提供更好的用戶體驗。因此,確保每個網頁的標題、中繼說明、H標籤和圖片ALT屬性都經過適當的優化是至關重要的。
    Thumbnail
    台北行天宮是許多民眾的信仰中心,來這邊除了求籤收驚外,在周邊也有許多在地巷內的美食,不論是天下第一攤的花生甜湯,還是有台北最強路邊攤之稱的不老麻糬,都相當美味,拜拜完安心後不妨也來安個五臟廟,為行天宮參拜之旅畫下一個完美句點吧!
    Thumbnail
    直接點,免下載聽小倉鼠podcast: 《你怎麼過今天,就怎麼過今生》 **************************** 🎯PODCAST節目名稱:【社畜逃脫筆記】🎯 歡迎在apple podcast及spotify各大平台搜尋+訂閱 【本集主題】 :如何改變和創造更好的人生? ⭐️ 你
    Thumbnail
    書名:重生炮灰大翻身 作者:小碩鼠5030 版區:原創言情 世界背景【自分類】:現代 主題分類【自分類】: 關鍵字【自分類】:重生、逆襲、種田、校園 評分【滿分5顆星】:2.5顆星 心得: 此文一開頭就道出了很多婆媳不合的憋屈婚姻生活,相親結婚通常只能看到表象,尤其是很多時候只相信媒婆的一張嘴。如果
    Thumbnail
    故事是設定在十四世紀的法國,以當時流行的黑死病為歷史背景作為依據的遊戲,是一款動作冒險解謎類型遊戲。玩法上依然是承襲第一代『瘟疫傳說:無罪』而做出延伸發展。劇情上主角姊弟倆人逃離宗教裁判所的追殺後,這次又要面對全新的挑戰!! (本篇文章將會有微量劇情雷,建議可先玩過再來閱讀) 在這次的故事當中,可以
    Thumbnail
    韓劇(2020)。 幾位醫生笑容滿面地從院長室走出,院長對閔科長說腦神經中心往後就拜託他了。閔科長笑稱才要請他多多關照,雖然只有幾天的時間,但整個團隊的實力堅強,體系也很健全,反而是他應該感謝他;跟著側身對頌和說往後就麻煩她了,她微笑點頭。 閔科長邀約眾人去餐廳用餐,院長室只剩下院長及頌和。院長邊倒
    Thumbnail
    蕨類(Platycerium)是世上最原始的植物,鹿角蕨是其中一個比較有特色的"活化石",很多人喜歡把它製作成掛牆裝飾品。認識鹿角蕨生長習性,了解其種植和繁殖方法。
    青年署U-start計畫不僅結合學校育成輔導資源,提供青年創業實質補助及陪伴輔導,協助青年學生創業實踐,此次更納入企業誠信課程及議題交流,鼓勵青年朋友勇於挑戰,大膽創新之際,亦能於經營層面融入誠信思維,建構誠信文化,以全方位提升公司競爭力,達成永續發展目的。
    Thumbnail
    隨著愛滋抗病毒療法(Antiretroviral Therapy,ART)的出現與進步,已經讓『愛滋病毒』與病患長期和平共處。「愛滋的慢性化」仰賴長期穩定服藥控制、回診追蹤與身心照顧,主動與醫療團隊配合與溝通,勇敢為自己爭取最適合的治療與生活品質,是病患的重要課題!