概念
n 弹性盒子,是另外一种布局方式,想要让元素变成一个弹性盒子,只需要给元素一个display:flex属性即可,拥有display:flex的元素会变成一个容器,其子元素会变成这个容器中的项目。
n Flex兼容性: 在IE上兼容不好,但是在移动端兼容不是问题
n 在使用弹性盒子的时候,容器中会存在主轴和副轴(交叉轴),一般情况下,主轴为横轴,副轴为纵轴,但是主轴和副轴可以通过flex-direction改变,项目会自动的在容器的主轴上排列
n 有了flex之后就可以抛弃float布局了
容器的六个属性
n flex-direction 调整主轴(正常默认主轴是横轴,项目从左向右排列flex-start到flex-end)
u row 默认值
u row-reverse主轴为横轴,flex-start在右边,flex-end在左边
u column 主轴为纵轴,flex-start在上面,flex-end在下面
u column-reverse主轴为纵轴,flex-start在下面,flex-end在上面
n flex-wrap控制项目的换行
u nowrap不换行(默认),如果项目总宽度大于容器总宽度,项目宽度会被压缩
u wrap换行第一行在上方
u wrap-reverse换行,第一行在下面
n flex-flow
u 是flex-direction和flex-wrap的符合属性
u flex-flow:column wrap
n justify-content控制了项目在主轴的排列方式
u flex-start项目顺序不变,左顶格(默认)
u flex-end项目顺序不变,右顶格
u center项目顺序不变,从中间开始
u space-around将剩余的空间等分,平分给每个项目左右两边
u space-between将每个项目之间的间隔设为相等,左右两个项目贴边
u space-evenly将每个项目之间的间距设置的完全一致
n align-items 控制了项目在副轴的排列方式
u flex-start居副轴的顶部,如果副轴有空间会把副轴的空间等分,所有的元素都在flex-start的位置
u flex-end居副轴的底部
u center居副轴的中间
u stretch如果在副轴上没有距离,那么默认拉伸为100%
n align-content只适用于有换行的项目
u flex-start从副轴的flex-start开始
u flex-end从副轴的flex-end开始
u center项目在容器的中间位置,如果在纵轴上有空间,只在所有的项目的上下部分有留白
u space-around将剩余的空间等分,平分给每行项目上下两边
u space-between将每行项目之间的间隔设为相等,上下两行项目贴边
u stretch将每个项目之间的间距设置的完全一致
项目的六个属性
n flex-grow 项目放大
u 默认值为0
u 放大后的宽度= 原本宽度 + 空白宽度 / (所有grow的总值) * 设置的grow值
u 如果没有空白宽度,设置flex-grow没有意义
n flex-shrink项目压缩
u 默认值为1
u 最终宽度= 项目本身宽度 - 需要压缩的宽度 / 总的shrink值 * 单个项目的shrink值
n flex-basis 项目在主轴占的空间
u 默认值为1
u 设置固定值,会将原有的宽度/高度 变成设置的值
u 这个属性只要存在就会覆盖原有的宽高
n flex复合属性
u felx是flex-grow flex-shrink flex-basis的复合属性
u 默认值为flex: 0 1 auto
u felx:1 表示flex-grow是1,其余的值不变
n align-self当前项目在副轴的位置
u flex-start在副轴的顶部
u flex-end在副轴的底部
u center在副轴的中间
n order 当前项目的排列顺序
u 默认值为0
u 值越小越靠前,反之越靠后
案例
n 1. 手机微信下方菜单布局
n 2. 骰子