1.彈性盒子/伸縮盒子
如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子
flex-direction 設定伸縮盒子的內部元素的排列方式
row 從左到右安行排列
column 從上到下按照列排列
row-reverse 從右到左按照行排列
column-reverse 從下到上按照列排列
flex-shrink 設定彈性盒子的內部元素的收縮方式
注意：所有盒子的預設收縮方式都是1
flex-grow 設定彈性盒子的擴充套件比例
注意：所有盒子的預設擴充套件比率為0
flex-basis 設定伸縮盒子內部元素的基準值
注意：所有元素預設伸縮基準值為元素的寬度
flex-wrap 設定伸縮盒子的子元素超出的處理方式
nowrap 自動收縮子元素以適應盒子
wrap 超出盒子換到下一行
wrap-reverse 超出盒子換到上一行
justify-content 設定伸縮盒子的子元素在水平方向的對齊方式
flex-start 靠左對齊
flex-end 靠右對齊
center 居中對齊
flex-between 兩端對齊
flex-around 平均分布
如果flex-between和
flex-around
這兩個屬性不起作用的話可以換成
space-between和
space-around
align-items 設定伸縮盒子的子元素的排列方式
flex-start 在伸縮盒子的左上角排列
flex-end 在伸縮盒子的左下角排列
center 在伸縮盒子的中間排列
baseline 在伸縮盒子的左上角基線排列
strecth 拉伸所有的子元素同父元素等高
align-self 針對伸縮盒子中的某個元素單獨設定排列方式
auto 使用預設方式
flex-start 在伸縮盒子左上角排列
flex-end 在伸縮盒子的左下角排列
center 在伸縮盒子的中間排列
baseline 在伸縮盒子的左上角基線排列
strecth 拉伸所有的子元素同父元素等高
注意：該屬性是在align-items的基礎上對某個子元素進行單獨設定
該屬性的預設方式並不是左上角，而是父級新增的屬性
align-content 設定伸縮盒子的子元素換行後的對齊方式
注意：如果伸縮盒子的子元素沒有換行，那麼該屬性無效
flex-start 換行內容靠左上角
flex-end 換行內容靠左下角
center 換行內容居中顯示
space-between 換行內容在垂直方向的頂部和底部分開
space-around 各行在彈性盒子容器中平均分布，兩端保留子元素和子元素之間間距大小的一半
strecth 拉伸子元素
order 設定彈性盒子內的子元素的排列順序
值為整數
數越小，排列越靠前
CSS3彈性盒子flex布局方式
一 css3彈性盒子 css3 彈性盒子 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。二 css3 彈性盒子內容 彈性盒子由彈性容器 和彈性子元素組成。彈性容器通...
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...
css3彈性盒子布局
彈性布局分為兩部分 1.語法是新增到父容器上的 display flex 想要做彈性布局一定要寫這句話 flex direction 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件流水平方向，預設情況下是從左往右 row reverse 顯示為行。但方向和row屬性值是反的 ...