flex 增长与收缩

shengguo 发布于2019-04-23 11:48 / 769人阅读

摘要：将增长值与收缩值设置为，基本大小为。增长基本大小额外空间增长系数增长系数总和按比例划分额外空间，然后各自分配。

flex：auto 将增长值与收缩值设置为1，基本大小为 auto 。

flex：none. 将增长值与收缩值设置为0，基本大小为 auto 。也就是固定大小。

增长：

基本大小 + 额外空间 *（增长系数 / 增长系数总和）

按比例划分额外空间，然后各自分配。

缩小：

基本大小 – 溢出大小 *（缩小系数 * 基本大小 / 各各缩小系数 * 自身大小之和）

#container {

  display: flex;

  flex-wrap: nowrap;

}

flex-shrink: 1并非严格等比缩小，它还会考虑弹性元素本身的大小。

容器剩余宽度：-70px
缩小因子的分母：1*50 + 1*100 + 1*120 = 270 (1为各元素flex-shrink的值)
元素1的缩小因子：1*50/270
元素1的缩小宽度为缩小因子乘于容器剩余宽度：1*50/270 * (-70)
元素1最后则缩小为：50px + (1*50/270 *(-70)) = 37.03px

均匀增长(直接按设置的比例增长)

将基本大小设置为：0，那么收缩值就不在适用了。

flex:值；或 flex-shrink：0；flex-basis:0;

如：flex:1; flex:2; flex:3. 那么第二个为第一个的2倍宽度，第三个为第一个的3倍宽度。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .flexbox-row{
            margin: 50px auto;
            display: flex;
            flex-direction: row;
            width: 120px;
            height: 320px;
            border: 1px #ccc solid;
        }
        .box1{
            flex: 1;
            height: 50px;
        }
        .box2{
            flex: 2;
            height: 50px;
        }
        .box3 {
            flex: 1.5;
            height: 30px;
        }
    style>
head>
<body>

<div class="flexbox-row">
    <div class="box box1" style="background-color:coral;">Adiv>
    <div class="box box2" style="background-color:lightblue;">Bdiv>
    <div class="box box3" style="background-color:khaki;">Cdiv>
div>

body>
html>

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1178.html

控制Flex子元素在主轴上的比例

摘要：控制容器内容元素和空白空间在主轴方向对齐。子元素相邻的不会发生合并。三深入了解规则如果存在正自由空间，则采用组合计算子元素在主轴上的比例。背景 flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念 showImg(https://user-images.githubuser...

chemzqm 2019-08-30 15:44 评论0 收藏0
几种常见布局的flex写法

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式公式1：子元素空间 < 父容器父...

fish 2019-08-01 17:08 评论0 收藏0
「译」Flexbox 基本原理

摘要：对这两个值添加，则主轴将反转，而交叉轴保持不变。顺序是以组为单位进行分配的。默认情况下所有的弹性项目都设置为，这意味着所有的项目位于同一组，并且它们会按照原始顺序进行定位。这是通过文件完成的，它负责跟踪依赖项及其版本。原文地址：Flexbox Fundamentals 原文作者：Marina-ferreira showImg(https://segmentfault.com/...

Forest10 2019-08-30 11:06 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

warnerwu 2019-08-02 16:09 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

MyFaith 2019-08-30 15:43 评论0 收藏0