css3 flex 筆記

flex 六角線上模擬器

為了要精進自己的切版技術，我報名了六角的網頁切版直播班，這幾天都在惡補 flex 的課程，以下就是我這周在上課做的筆記。

傳統的 float 排版只能左右流動，因此無法應對現在多元的排版方式。Ex:置中、垂直、等距等等。

flex 不只解決這些問題，還比 float 更有彈性，了解 flex 之後就可以做出更多樣化的網頁排版，所以 flex 是現在前端必學的超強大排版方式!

flex 特性

flex 軸線觀念

• 主軸是由左至右的，以預設來說起點是 “左邊” 開始排列 (水平)
• 交錯軸是由上往下的，以預設來說起點是 “上面” 開始排列 (垂直)

flex 相關屬性

• 外層屬性 ( Container 外容器 )
• 內層屬性 ( Items 內元件 )

flex 對齊方法

• 主要是仰賴軸線設定來對齊

Bootstrap 4 flex 方法

• 以 justify-conctent 來說是 主軸 的排列方式 (平行於「主軸」的對齊方式，可以對齊主軸的起點、終點、等距排列 )

• 以 align-items 來說是 交錯軸 的排列方式 (可以對齊「交錯軸」的起點、終點、置中 )

• 以 flex-direction 來說，它可以改變主軸的方向性，可以改成 垂直 的方向 (由上而下、由下而上)，這個時候排列順序也會做改變

重要的 flex 屬性

display: flex; 特性

Flex 的好處之一就是會依照外層屬性做比例伸縮，不用怕內層下過大的高度、寬度就會爆出外層，它會自己自適應。

內層屬性預設是等高的，如果都不寫，就會依照最高的做伸縮。也可以自己設定高度(寫死高度還是會依照你的設定做客製化 )，整體來說，Flex 是非常靈活的。

外層屬性：這些都是下在外層( 父層 )上，才能操控內層屬性

• display : 必備屬性
• flex-direction : 決定 flex 主軸線方向性
• justify-conctent : 主要軸線的對齊
• align-items : 交錯軸線的對齊

內層屬性

• order : 排序
• align-self : 單一個物件的交錯軸對齊

主軸會關係到裡面的 item 如何做排列 !

主軸的預設排列方向是 左 (主軸起點) –> 右 (主軸終點)

那麼主軸除了左到右的排列，還有哪些排版呢?
透過主軸來改變 item 的排列方式

flex-direction (決定 flex 主軸線方向性) 外層

• flex-direction : row (default) 預設 左–>右
• flex-direction : row-reverse 右–>左
• flex-direction : column 上–>下
• flex-direction : column-reverse 下–>上

justify-conctent (主要軸線的對齊) 外層

下圖的範例是以 主軸( flex-direction : row ) 左–>右的情況下使用主軸對齊

依據主軸的軸線決定物件之間的間隔方法

• justify-content: flex-start 往主軸線的起點開始
• justify-content: flex-end 往主軸線的終點開始
• justify-content: space-between 貼齊容器起點跟終點 ( 可以刪掉 padding 跟 margin 來看 )
• justify-content: space-around 平均分配留白部分
• justify-content: center 是針對主軸來做置中對齊並非水平置中

align-items (交錯軸線的對齊) 外層

是垂直於主軸的對齊方法 (所有元件的對其方式)與 align-self 不同

下圖的範例是以 主軸( flex-direction : row ) 左–>右的情況下使用交錯軸對齊

align-self (交錯軸線的對齊) 內層

align-self 是「內元件本身」垂直於主軸的對齊方法

不會影響到其他設定值，只管內元件本身

怎麼讓排版斷行?

還有一個常用的語法為 flex-wrap: wrap; ，可以幫助排版斷行。

flex 裡面還可以有 flex !!!