彈性盒布局:display:flex; display:inline-flex;(兩個元素會在一行顯示)
作用: 控制子集在"主軸"上排列
顯示規則:所有的子元素都會在主軸上排列
預設x為主軸
如果設定x為主軸,那y為側軸
如果設定y為主軸,那麼x為側軸
設定方法: 父元素必須為彈性盒 display:flex;
設定為display:flex;
1: 彈性盒,子元素預設在主軸排列,預設x為主軸
2: 父級元素為彈性盒,子元素都能設定寬高
3: 父元素為彈性盒,讓子元素在彈性盒中上下左右居中,只需要設定margin:auto;
設定display:flex / inline-flex;對子元素的影響
子元素的float 和 clear 無效
vertical-align(元素垂直對齊方式)無效
容器(父元素)
屬性:flex-direction:;設定主軸
row 水平方向主軸
row-reverse 水平反向主軸
column 垂直主軸
column-reverse 垂直反向主軸
flex-wrap:;子元素是否換行
nowrap 不換行
wrap 換行
wrap-reverse 反向換行
flex-flow:;設定主軸 是否換行
justify-content:;子元素在主軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
space-around 完全自動分配
space-between 兩端對齊,中間自動分配
align-items:;子元素在側軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
baseline 基線對齊
stretch 預設位置對齊
align-content:;多行元素在側軸上的對齊方式,多行元素才有效
flex-start 起始位置
flex-end 終點位置
center 居中
space-around 完全自動分配
space-between 兩端對齊,中間自動分配
stretch 預設位置對齊
專案(子元素)
屬性:
align-self:;子元素在側軸上的對齊方式
flex-start 起始位置
flex-end 終點位置
center 居中
stretch 拉伸(此元素不設定寬度或者高度)
auto 預設值
注意:如果父元素有此屬性設定,則繼承alig-items:;屬性設定
order:;數值越大,子元素越靠後
flex彈性盒模型和grid網格布局
適合做螢幕自適應的網頁 兩部分 1.父元素新增 display flex flex direction row 左右排列 row reverse 左右映象顛倒 colum 讓子元素上下排列 colum reverse 上下映象顛倒 flex wrap 是否進行換行處理 nowrap 預設 不換行 w...
css3移動端布局 怪異盒模型和彈性盒模型
一 怪異盒模型 1 box sizing 屬性值 box sizing content box 常規盒模型 box sizing border box 怪異盒模型 ie盒模型 2 觸發怪異盒模型 box sizing border box 3 怪異盒模型特點 padding和border都會在元素的...
flex彈性布局的一些屬性
注意，設為 flex 布局以後，子元素的float clear和vertical align屬性將失效 1.容器的屬性 flex direction flex wrap flex flow flex direction flex wrap justify content aligns items 特...