关于flex布局垂直居中

关于flex布局垂直居中,第1张

在我还没有成为一名前端工程师之前,在布局页面的时候,让元素水平、垂直居中都是用的浮动或者定位来实现(ps:关于用这些方法实现的水平垂直居中方法也有很多种,有空也总结一下吧)直到有一次跟一个有开发经验的小哥哥聊天,他跟我说他在工作中都只用flex布局了,说我用的那些方法都过时了,这强烈的激起了我想要学习flex布局的热情!

想要让元素实现d性布局,只需要要包含容器中(父元素)设置属性display:flex即可,平时工作用的最多的就是水平垂直居中啦,想要让元素水平居中,在容器中设置justify-content:center而要实现垂直居中则可以设置align-items:center;重点来了,还有另一种奇淫技巧可以实现垂直居中,那就是当父元素设置了d性布局并且设置了高度后,只要设置元素的margin:auto就可以实现元素的垂直居中了!原理就是margin:auto就是用来分配元素的剩余空间的,前提是元素在非普通文档流中&&元素要有一个确定的高度&&要有剩余空间!!比如想要让块级元素右对齐,只需设置margin-left:auto即可

html两个列表垂直显示方法浮动第一级lis(以避免“浮动div”),或使用display。

列表布局是项目开发中最常用的一种布局方式,我们可以通过ListView来定义列表项,支持垂直和水平方向展示。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7616785.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存