Category Archives: CSS

Order Box Layout in Modal

HTML

SCSS

 

Scroll Spy (Fixed footer)

Use  fixed on mobile could cause wrong position for unknown reason. Change value of “position” property should be the best solution.

 

Align text to bottom of a div

Use flex:

CSS:

Reference:

Sticky (Fixed) Column of a table

 

CSS Flex

Vertical Center

Horizontal Alignment

Columns

flex attribute for child items
https://www.oxxostudio.tw/articles/201501/css-flexbox.html

flex

好酒沉甕底,有耐心看到下面的才會看到重點喔哈哈!flex 應該是 Flexbox 裏頭最重要的屬性了,而 flex 其實是由三個屬性組合而成,依照先後順序分別是「flex-grow」、「flex-shrink」和「flex-basis」,如果 flex 只填了一個數值 ( 無單位 ),那麼預設就是以 flex-grow 的方式呈現,至於三個屬性的解釋如下:

flex-grow:數字,無單位,當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度,按照數字做相對應的「伸展」比例分配,預設值為 0,不會進行彈性變化,不可為負值,設為 1 則會進行彈性變化。

flex-shrink:數字,無單位,當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度,按照數字做相對應的「壓縮」比例分配,預設值為 1,設為 0 的話不會進行彈性變化,不可為負值。

flex-basis:子元素的基本大小,作為父元素的大小比較基準,預設值為 0,也因為預設值為 0,所以沒有設定此屬性的時候,會以直接採用 flex-grow 屬性,flex-basis 也可以設為 auto,如果設為 auto,就表示子元素以自己的基本大小為單位。。

三個屬性可以分開設定,也可以合在一起用一個 flex 統一設定,下面的例子展現出同一個 Flexbox,在不同的寬度,子元素會有不同大小的呈現。( 範例:css-flexbox-demo9.html)

Reference:

Bootstrap Modal Issues

Width:

If the width of modal is too wide, check the following possible reasons:

  • If there is any long text string is not broken to new line.
  • Image width without max-width
  • iframe (e.g. embeded youtube video)

CSS Issues in iphone

如果不是RWD,Fixed Menu會沒辦法完整顯示

Solution: 用JS判斷window寬度,把fixed改成static

iPhone會自動調整文字的大小,有時候內文的字型會比標題還大

Solution: