响应式设计手机端flex的用法

Posted 2020-09-27 鐦鐦

---恢复内容开始---

今天总结一下flexbox的用法

它用于受极端的响应式布局，前面涉及的css和html知识不再多说，meta标签一定记住！<meta name="viewport",content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no；"。

这其中有一个非常好的垂直水平居中方式，以前我们讲水平垂直居中，通常会用到这个,这个是针对于子元素，这两种对于那种左边是图片，垂直居中简直不要太好用！：

.main{

　　position:absolute;

　　top:50%;

　　left:50%;

　　-webkit-transform:translate(-50%,-50%);

}

有了flex之后，我们就可以这样做了,注意下面这个要对父元素使用，他保证的是子元素：

.main{

　　justify-content:center;

　　align-items:center;

　　display:-webkit-flex;

}

但是如果遇上的是左边是图片，右边是文字的呢？想让他一直占同样的比例，怎么办咧？有办法！

diaplay:-webkit-flex;  父元素

flex:1 ;   子元素     数值多大就是占多少份！

更多详请要看flex了！

flex-wrap: nowrap;

上面这个属性是设置换不换行，比如你的父元素是400px，而各个子元素相加一起大于400px；如果不换行，他就会计算你子元素的比例，而将父元素按比例分，但是如果设置了换行，就会按照子元素原来的大小进行布局，最后不足的时候换行在下一部分，但是第一行的后面会留有父元素剩下的宽度！

 

 

---恢复内容结束---