CSS flex常忘記筆記

flex-direction: column/column-reverse row row-reverse (預設row)

flex-wrap: wrap nowrap wrap-reverse (default: nowrap)

常忘記有wrap-reverse
Flexbox Froggy - A game for learning CSS flexbox
最後一關會用到他(我卡很久在那邊)

flex-flow: flex-direction flex-wrap;

main axis是主軸線
cross axis是副軸線

我覺得上面兩個名詞要搞懂會比較好了解

justify-content

參考flex-direction主軸線

align-content(default:stretch) 用在多行 單行可能沒做用

交錯軸上下

align-items(default:stretch)，有baseline

這兩個常常搞錯

※踩雷筆記

當flex裡面元素沒有設定高度，預設為height:auto的話，stretch會延展高度100%
相反沒有的話，看內文的寬度，ex:<div></div>內文沒有高度和文字，但不限顯示出來，除非打字就會有東西

align-items和align-content公用看起來很像，裡面有詳細介紹
flex布局中align-items 和align-content的区别 - CSDN博客
align-content - CSS：层叠样式表 | MDN

width

flex等於由下面屬性和成

flex-grow: (default:0)預設不會延展

flex-shrik:(default:1)預設會縮小

flex-basis:(default:auto) 依照副軸線對應width或height，長度優先權最高

flex-item的flex-basis与width属性有什么关系？ - 额，前端 - SegmentFault 思否

小雷注意

如果沒設定flex-basis長度的話(有設定width)，flex-shrik不會把元素縮小….
看來flex-shrik都是依照flex-basis長度縮放為主
可實作看看會很清楚
JS Bin - JS Bin

如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。

深入理解css3中的flex-grow、flex-shrink、flex-basis
有公式

心得

其實我覺得flex精華都在flex-grow跟flex-shrik上面，其實我之前就有去了解flex
有玩過Flexbox Froggy遊戲…，但對排版印用不是很了解
flex-shrik預設竟然是1，會自動縮放，但是flex-grow預設是0
也就是說在不預設定flex屬性時候
裡面原素預設不會放大，但也不會超過父層寬度
這用在響印式設計真的還不錯

常常看到很多用flex:1，會自動擴大
我一直以為每個元素都要設定flex，但其實不用

備註
flex:1 只會影響flex-grow
可惡…被padding跟margin影響了XD

影片教學可參考
(1) 卡斯伯 - 20:30 直播 CSS Flex 來試試看 Flex 吧 看看這東西到底是怎麼算的 😆 今天沒有 ZOOM 頻道