弹性盒子 display:flex；

常用属性介绍

//让某子元素铺满剩余空间
父元素 .father{
    display:flex;
    display: -webkit-flex;
}
子元素 .child{
    flex-grow: 1;
}
其他子元素 .otherChild{
    可 flex：1 ;
    或者 width:50px;写固定值
}

垂直居中 写在父节点上
align-items: center;
水平居中对齐 写在父节点上
justify-content: center;

//让子元素垂直居中对齐
.father{
    display: flex;
    display: -webkit-flex;
    align-items: center; 
}

//让子元素水平居中对齐
.father{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}

//让子元素水平居中 垂直居中 对齐
.father{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

//让子元素垂直居中，两端对齐
.father{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content:space-between;
}

让弹性盒元素在必要的时候拆行：子元素右边不够，自动换行
ios如果不写这个，会出现标签直接截断到第二行
display:flex;
flex-wrap: wrap;



原理介绍
flex-grow: 1; 某子元素铺满剩余空间
flex-grow 默认值为0，即如果空间有剩余，也不放大。
当有一个子元素，


.box {
    display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}

兼容性写法
.box {
    display: flex || inline-flex;
}

 

本文地址：https://blog.csdn.net/weixin_40828023/article/details/112596935