flex弹性盒子常用属性

flex弹性盒子常用属性

属性 描述
display flex 定义一个盒子为弹性盒子
flex-direction row 子盒子水平排列,从左到右
row-reserve 子盒子水平反向排列
column 子盒子垂直排列,从上到下
column-reserve 子盒子垂直反向排列
flex-wrap no-wrap 子盒子不换行,默认
wrap 子盒子不换行
wrap-reverse 换行并改变顺序
justify-content flex-start flex子元素在最左边
flex-end flex子元素在最右边
center flex子元素在正中间
space-between 平分flex容器
space-around 平分flex容器,但是每个子元素两边是子元素间距的一半
align-content flex-start flex子元素在最上边
flex-end flex子元素在最下边
center flex子元素在纵向正中间
space-between 纵向平分flex容器
space-around 纵向平分flex容器,但是每个子元素两边是子元素间距的一半
stretch 默认:li将ul划分
align-items flex-start flex子元素在最上边
flex-end flex子元素在最下边
center flex子元素在纵向正中间
baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐
stretch 高度100%,宽度自动
align-self flex-start flex子元素在最上边
flex-end flex子元素在最下边
center flex子元素在纵向正中间
baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐
stretch 高度100%,宽度自动
order 1(number) 改变顺序
flex 1(number) 该元素占子元素剩余位置的比例
原文地址:https://www.cnblogs.com/rainbow8590/p/7273909.html