flex布局基础知识

433 阅读1分钟

flex弹性布局参数

display确定该元素的类型
1. none:隐藏对象
2. inline: 指定对象为行内元素
3. block: 指定对象为块元素
4. inline-block:指定对象为行内块元素
5. table-cell:指定对象为表格单元格
6. flex:弹性盒
父元素:
display:flex
justify-content:
    center;主元素x轴居中 
    flex-start左对齐 
    flex-end右对齐  
    space-between左右两端对齐 子元素间距想等 
    space-around 左右间距是中间间距二倍 
    space-evenly 项目之间间距与项目容器间距相等
align-items:
flex-start;顶部对齐默认 
    centerY轴居中排列 
    flex-end底部对齐
flex-direction:
    row默认 
    row-reverse反转子元素 
    column按列分布 
    column-reverse按列反转
flex-wrap:
    nowrap默认 强制等分子元素宽度不换行 
    wrap根据自身宽度超出换行
子元素:
order: 项目排列顺序 数值越小越靠前
align-self:  
    center居中 
    flex-start;顶部对齐默认 
    flex-end底部对齐
flex-grow: 0 默认 1放大
flex-shink:默认1 等比缩小  0不缩小
flex-basic:auto默认  80px覆盖width
flex:上边三个属性  快捷键 auto(1 1 auto)等分放大缩小 none(0,0,auto)不放大,但是等分缩小