目录
display:flex / display:inline-flex
目的
提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的
让容器有能力改变项目的宽和高，以填满可用空间
布局与方向无关
最适合小规模布局 （大规模用网格）
属性
display:flex / display:inline-flex
适用于父类元素
声明要使用弹性盒模型
flex-direction
写在父级css中，但是作用于子级
检索，子级在盒子中的位置 （子级的排列顺序）
flex-direction :row 横向，左到右
flex-direction :row-reverse 反横向，右到左
flex-direction :column 纵向，从上到下
flex-direction :column-reverse 反纵向，从上到下
flex-wrap
写在父级，作用于子级
检索，子级是否超出父级，换不换行
flex-wrap :nowrap 不换行
flex-wrap :wrap 换行
flex-wrap :wrap-reverse 反转wrap排列
flex-flow
复合属性，写在父级，作用于子级
flex-flow：<flex-direction> <flex-wrap>
就是先写排列方式，再写是否换行
justify-content
检索弹性盒子在主轴（x）方向上的对齐方式
写在父级，作用于子级
justify-content :flex-start 左对齐
justify-content :flex-end 右对齐
justify-content :center 居中
justify-content :space-between 两端居中，中间等间距
justify-content :space-around n盒子的个数均分为n个空间，盒子在各自空间内居中
align-items
检索弹性盒子在y轴上的对齐方式
写在父级，作用于子级
值
align-items :flex-start 置顶
align-items :flex-end 置底
align-items :center 居中
align-items :baseline 与基线对齐
align-items :stretch 置顶+置底，高度受min-height与max-height制约
align-content
检索 换行时对齐方式
写在父级，作用于子级
align-content :flex-start 置顶
align-content :flex-end 置底
align-content :center 居中
align-content :space-between 上下置顶+置底 ，中间居中
align-content :space-around 纵向平分空间，各行居中显示
align-content :stretch 纵向平分空间，各行以最大方式显示
order
排列顺序
写在子级
值越小，排位越靠前
flex-grow
分配剩余空间
写在子级
值越大，分配空间越多
flex-shrink
起效前提：子级长度和大于父级
起效后，三者比例分配父级的宽度，即原定宽度不起作用了
写在子级
默认为1
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
