flex布局学习

最新推荐文章于 2024-09-14 21:53:48 发布

金枪鱼合唱团

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量93

点赞数

分类专栏：前端文章标签：学习

本文链接：https://blog.csdn.net/weixin_50488897/article/details/127320210

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局中的justify-content属性，包括flex-start、flex-end、center、space-between和space-around等值的含义和应用场景。同时，解释了flex属性的用法，说明了flex:1如何使得子元素等分空间以及flex:auto如何根据内容自动调整大小。通过本文，读者可以深入理解Flex布局的基本概念和使用技巧。

摘要由CSDN通过智能技术生成

flex布局
真的在学了

justify-content各属性含义：

justify-content作用于内容上，所以这个属性要在外层弹性容器上写
justify-content： flex-start：默认值，贴着头放
justify-content： flex-end：贴着尾放
justify-content： center：居中挨着放
justify-content： space-between：平均放，贴着头和尾
justify-content： space-around：平均放，头和尾各留一段间隙，间隙宽度跟元素之间的间隙宽度都相等

flex: 1：

flex: 1; === flex: 1 1 0;
规定了如果父元素有多余空间，以怎样的比例去分配剩余空间，并不会对子元素原本就占据的空间做处理。如果设置了flex: 1，所有子项平分父亲，不管子项是否设置了固定宽度。等分。
flex：auto：
元素充分利用剩余空间，但是各自尺寸按照各自内容比例进行分配