CSS Flex佈局學習(CSS Flexible Box Layout)

摘要:

• Updated:2018/11/27
• W3C標準CSS Flex(Flexible Box)佈局學習
• Flex佈局容器(container)與容器內元素(item)屬性說明

---

參考:

• W3C標準20181119版:https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/
• W3C標準Flex Wiki:https://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
• CSS TRICKS:《A Complete Guide to Flexbox》https://css-tricks.com/snippets/css/a-guide-to-flexbox/

總結:

Flex佈局屬性列表
	屬性		取值(默認值)	說明
彈性容器屬性	flex-flow	<‘flex-direction’> || <‘flex-wrap’>
		flex-direction	row | row-reverse | column | column-reverse	主軸方向
		flex-wrap	nowrap | wrap | wrap-reverse	主軸方向換行方式
	justify-content		flex-start | flex-end | center | space-between | space-around	元素在主軸上的分佈方式
	align-items		flex-start | flex-end | center | baseline | stretch	元素在交叉軸上的對齊方式
	align-content		flex-start | flex-end | center | space-between | space-around | stretch	多主軸在交叉軸上的分佈方式
彈性元素屬性	flex	none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] Initial: 0 1 auto
		flex-grow	<number> Initial: 0	元素放大比例(默認不放大)
		flex-shrink	<number> Initial: 1	元素縮小比例(默認縮小)
		flex-basis	content | <‘width’> Initial: auto	元素最小尺寸(默認0)
	order		<integer> Initial: 0	元素排序順序
	align-self		auto | flex-start | flex-end | center | baseline | stretch	元素單獨對齊方式

術語:

Flexbox佈局術語
flex container	彈性(伸縮)容器	Flexbox 佈局座標系
flex item	彈性(伸縮)元素
main axis	主(座標)軸
cross axis	交叉(座標)軸
main start / end	主(座標)軸起(始,終)止位置
cross start / end	交叉(座標)軸起(始,終)止位置
main size	主(座標)軸尺寸(規模)
cross size	交叉(座標)軸尺寸(規模)

Flexbox佈局詳解: