容器：
父容器：
justify-content：設定子容器沿著主軸排列
位置排列：
flex-start 起始端對齊
flex-end 末端對齊
center 居中對齊
分布排列：
space-between 首尾端到父級容邊距是子容器之間邊距的一半
space-around 首尾端均勻對齊分步
align-items：設定子容器如何沿著交叉軸方向分配子容器的間距
位置排列：
flex-start 起始端對齊
flex-end 末端對齊
center 居中對齊
基線排列：
baseline 所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線
拉伸排列：
stretch 子容器沿交叉軸方向的尺寸拉伸至與父容器一致
子容器：
flex：主軸上如何伸縮，flex的值可以是無單位數字（如：1, 2, 3），也可以是有單位數字（如：15px，30px，60px），還可以是none關鍵字。子容器會按照flex定義的尺寸比例自動伸縮，如果取值為none則不伸縮
三個值連用：flex-grow flex-shink flex-basis
align-items：設定子容器如何沿著交叉軸方向分配子容器的間距
位置排列：
flex-start 起始端對齊
flex-end 末端對齊
center 居中對齊
基線排列：
baseline 所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線
拉伸排列：
stretch 子容器沿交叉軸方向的尺寸拉伸至與父容器一致
軸篇：
Flex彈性盒模型
flex direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
理解CSS彈性盒模型flex
css3引入了一種新的布局模型 flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕...