iT邦幫忙

DAY 41
7

CSS沒有極限系列 第 37

CSS - Flex的對齊

今天參加了MOPCON,所以來介紹簡單一點的。承前篇,Flex是為了改善過去的CSS2排版模式所衍生出的新語法,本章則要介紹他的對齊方式。
CSS範例:http://ashareaday.wcc.tw/#2013-10-26

今天參加了MOPCON,所以來介紹簡單一點的。承前篇,Flex是為了改善過去的CSS2排版模式所衍生出的新語法,本章則要介紹他的對齊方式。

大量參考:http://www.w3.org/html/ig/zh/wiki/Css3-flexbox

align-items

名稱: align-items
值: flex-start | flex-end | center | baseline | stretch

對其物件的垂直點,上面是其對應的參數,而下方式示意圖。

stretch,也是預設值,把整個拉開來。

flex-end

center

baseline,這是比較特例的,可以配合文字的行高(line-height),將元素第一行文字對齊。

justify-content
水平的對齊方式,配合以下的這張圖和下面的範例可以了解其功能。

名稱: justify-content
值: flex-start | flex-end | center | space-between | space-around

center

flex-start

flex-end

space-between

space-around


上一篇
CSS - Flex的排版方式
下一篇
CSS - 利用jQuery套用Class(超簡單!)
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言