相关文章推荐
爱喝酒的橙子  ·  黄炜：Neither Nature nor ...·  昨天    · 
俊逸的土豆  ·  【非遗传人读经典】《周易》说了哪些“道”“道道”？·  5 月前    · 
大气的凳子  ·  江苏省人民政府要闻关注习近平总书记在南瑞集团 ...·  6 月前    · 
干练的西装  ·  文献管理软件EndNote正式开通使用-上海 ...·  8 月前    · 
另类的酱肘子  ·  润心慧心三生有幸——复旦大学附属闵行实验学校 ...·  11 月前    · 
小百科  ›  CSS 排版神器 Flexbox - 一顆藍莓
css flexbox
性感的炒饭
1 年前
  • 展開運算子 (Spread Operator) 與其餘運算子 (Rest Operator)
  • Event Loop (事件循環)
  • First-Class Function (一級函式)
  • Optional Chaining (可選串連)
  • 設計模式 (Design Pattern)

    React

  • React Children 屬性

    • Node.js

  • 使用 Node.js 來爬蟲吧！[PTT 股票板]
  • 使用 Node.js + Puppeteer 來爬蟲吧！[通過 PTT 八卦板年齡限制]

    • Discord Bot

  • 【用 JS 寫一個 Discord Bot！】01 建立機器人
  • 【用 JS 寫一個 Discord Bot！】02 音樂機器人
  • 【用 JS 寫一個 Discord Bot！】03 Discord.js v14 音樂機器人 (新版)

    • MySQL

  • 以 MySQL 為例解釋外鍵（Foreign Key）
  • 簡單整理 Git 常用指令

    • display 

    1
    		 
    display: flex | inline-flex;

    要使用 Flexbox 必須先定義一個父元素容器，並於父元素定義 display 屬性為 flex 或 inline-flex 。

  • flex ：Flexbox 的常用屬性，後方的元素會換行
  • inline-flex ：類似於 inline-block 加 flex ，在後方的元素不會換行

    • 範例程式碼：

    See the Pen flex vs inline-flex by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    flex-direction 

    1
    		 
    flex-direction: row<default> | row-reverse | column | column-reverese;

    flex-direction 可以指定元素的排列方式。

  • row ：預設值，橫向排列
  • column ：直向排列
  • row-reverse ：橫向反向排列
  • column-reverse ：直向反向排列

    • 範例程式碼：

    See the Pen flex-direction by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    flex-wrap 

    1
    		 
    flex-wrap: nowrap<default> | wrap | wrap-reverse;

    當多個子元素超過父元素的寬度時， flex-wrap 可以決定是否將子元素換行。

  • nowrap ：預設值，不換行，子元素會縮短以符合父元素的寬度
  • wrap ：換行，超出父元素寬度的子元素會換到下一行
  • wrap-reverse ：反向換行，也就是各行的順序會顛倒

    • 範例程式碼：

    See the Pen flex-wrap by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    justify-content 

    1
    		 
    justify-content: flex-start<default> | flex-end | center | space-between | space-around;

    justify-content 決定水平對齊的位置。

  • flex-start ：預設值，靠左對齊
  • flex-end ：靠右對齊
  • center ：置中對齊
  • space-between ：平均分配，左右貼齊父元素
  • space-around ：平均分配，類似 margin 的概念
  • space-evenly ：平均分配，每個間距都是相同寬度

    範例程式碼：

    See the Pen justify-content by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    align-items 

    1
    		 
    align-items: flex-start | flex-end | center | stretch<default> | baseline;

    align-items 決定垂直對齊的位置。

  • flex-start ：靠上方對齊
  • flex-end ：靠下方對齊
  • center ：置中對齊
  • stretch ：預設值，所有元素撐開與父元素同高
  • baseline ：依元素的基準線對齊

    範例程式碼：

    See the Pen align-items by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    align-content 

    1
    		 
    align-content: flex-start | flex-end | center | stretch<default> | space-between | space-around;

    align-content 針對多行的元素進行排序。

  • flex-start ：靠上方對齊
  • flex-end ：靠下方對齊
  • center ：置中對齊
  • stretch ：預設值，所有元素撐開與父元素同高
  • space-between ：平均分配，上下貼齊父元素
  • space-around ：平均分配，類似 margin 概念

    • 範例程式碼：

    See the Pen align-content by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    子元素屬性

    align-self 

    1
    		 
    align-self: flex-start | flex-end | center | stretch | baseline;

    align-self 針對各別子元素進行排序，不受其他影響。

  • flex-start ：靠上方對齊
  • flex-end ：靠下方對齊
  • center ：置中對齊
  • stretch ：子元素撐開與父元素同高
  • baseline ：依元素的基準線對齊

    • 這邊我直接拿上面的 align-items 的範例來改，可以看到 2 號橘色方塊被我設定為 align-center: center ，所以不管怎麼排序，橘色方塊都會垂直置中。

    範例程式碼：

    See the Pen align-self by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    order 

    1
    		 
    order: <number>;

    order 可以決定子元素的排序順序，只能給定數字。

    範例程式碼：

    See the Pen order by Priscilla Lin ( @Priscilla_Lin ) on CodePen . 
    1
    		 
    flex: <flex-grow> <flex-shrink> <flex-basis>;

    flex 是由三個值組成，如果只給定一個值，則是給定 flex-grow 。

    flex-grow 

    1
    		 
    flex-grow: <number>;

    當子元素的總寬度 不超過 父元素時， flex-grow 會分配剩餘的空間給特定子元素。

    flex-grow 的預設值為 0，設定 1 以上的值會進行彈性變化。

    範例程式碼：

    See the Pen flex-grow by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    flex-shrink 

    1
    		 
    flex-shrink: <number>;

    當子元素的總寬度 超過 父元素時， flex-shrink 會將特定子元素的寬度依比例縮減。

    flex-shrink 的預設值為 1，設為 0 的話不會進行彈性變化。

    範例程式碼：

    See the Pen flex-shrink by Priscilla Lin ( @Priscilla_Lin ) on CodePen .

    flex-basis 

    1
    		 
    flex-basis: <number>;

    flex-basis 會指定子元素在主軸 (main axis) 上的初始大小。

    flex-direction: row 為更改子元素寬度，反之 flex-direction: column 則更改子元素高度。

    flex-basis 的預設值為 0，也可以設定為 auto，表示以子元素自己的大小為基準。

    範例程式碼：

    See the Pen flex-basis by Priscilla Lin ( @Priscilla_Lin ) on CodePen .
     
    推荐文章
    爱喝酒的橙子  ·  黄炜：Neither Nature nor Nurture: The Impact of Maternal Education ...
    昨天
    俊逸的土豆  ·  【非遗传人读经典】《周易》说了哪些“道”“道道”？
    5 月前
    大气的凳子  ·  江苏省人民政府要闻关注习近平总书记在南瑞集团考察激励企业研发 ...
    6 月前
    干练的西装  ·  文献管理软件EndNote正式开通使用-上海大学图书馆
    8 月前
    另类的酱肘子  ·  润心慧心三生有幸——复旦大学附属闵行实验学校2021年心理健康 ...
    11 月前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南