flex布局-(三个属性)

最新推荐文章于 2024-08-22 20:21:34 发布

是馒头妹妹呀

最新推荐文章于 2024-08-22 20:21:34 发布

阅读量957

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_62877814/article/details/128044675

版权

本文详细介绍了Flex布局中的三个关键参数：flex-grow、flex-shrink和flex-basis。flex-grow用于定义项目的放大比例，flex-shrink则规定了项目在空间不足时的收缩比例，而flex-basis则是在分配空间前计算项目的基础大小。通过实例代码，阐述了如何利用这些属性实现不同比例的布局排列，如平均分配和固定比例排列等。

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

我们在使用flex布局网页时,通常只用到flex的一个参数,事实上,flex有三个参数,

常用的 flex 1, 其实等价于 flex 1 1 0%;

flex:flex-grow flex-shrink flex-basis

flex-grow:定义放大比例，默认为0，规定项目相对于其他灵活的项目进行扩展的量
flex-shrink: 定义了项目的缩小比例，仅在宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为1.
flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
说起来听拗口也不怎么好理解，直接上代码吧！

示例1：
子元素都设置为flex:1的时候平均分

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }
 
        .pa