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;
        }

        .parent {
            width: 1000px;
            display: flex;
            border: 1px solid #000;
            margin: 50px;
        }

        .parent div {
            height: 200px;
            flex: 1;
        }

        .child-1 {
            background-color: #888;
        }

        .child-2 {
            background-color: #f55;
        }

        .child-3 {
            background-color: #55f;
        }
    </style>
</head>

<body>

    <div class="parent">
        <div class="child-1"></div>
        <div class="child-2"></div>
        <div class="child-3"></div>
    </div>

</body>

</html>

flex:1 ===  flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

 

实现固定1:3:2比例排列：

将子元素的flex分别设置为1,3,2，即可实现1:3:2的布局排列

.child-1 {
    flex: 1;
    background-color: #888;
}

.child-2 {
    flex: 3;
    background-color: #f55;
}

.child-3 {
    flex: 2;
    background-color: #55f;
}

示例2：

flex-basis:

.child-1 {
    flex-grow: 1;
    flex-basis: 400px;
    background-color: #888;
}

将第一个子元素flex-basis设置为400px，则容器剩余分配部分为1000px-400px=600px,

child-1: 400+600*(1/(1+3+2))=500px

child-2: 600*(3/(1+3+2))=300px

child-3: 600*(2/(1+3+2))=200px

 

示例3：

flex-shrink：

.parent div {
    height: 200px;
    flex-grow: 1;
    flex-basis: 400px;
}

.child-1 {
    flex-shrink: 1;
    background-color: #888;
}

.child-2 {
    flex-shrink: 2;
    background-color: #f55;
}

.child-3 {
    flex-shrink: 7;
    background-color: #55f;
}

这里将三个子元素的flex-grow都设为1，flex-basis都设置为400px,在不设置flex-shrink的情况下即使3*400=1200px大于容器的1000px，但是依旧会平均分。

这里将子元素的flex-shrink分别设置为1,2,7，则：超出部分为400*3-1000=200px

child-1: 400px-200px*(1/(1+2+7))=380px

child-2: 400px-200px*(2/(1+2+7))=360px

child-3: 400px-200px*(7/(1+2+7))=260px

 

# css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生