flex布局中flex-basis|flex-grow|flex-shrink

整个才是正确的算法

flex-basis（基准值）

可以设置flex布局中容器的宽度，如果同时存在width属性，将把它给覆盖！

它也是计算flex-grow和flex-shrink的基准值，默认值是auto；

flex-grow（扩展比例）

当flex-item的总宽度小于容器时，flex-grow设置为0（默认值），那么他将不安比例来均分剩余的空间；

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

 .flex-container{

     width:400px;

     background:red;

     display:flex;

     /*

      总的空间空间长度400px

      flex-item：100+100=200

      child1分得的空间：=(1/3)*200=66.7

      child1最终的宽度：=flex-basis+66.7=166.666666666（近似值）

      同理可以计算 child2的值：

     */

 }

 .flex-item:nth-child(1){

      flex-basis:100px;/*flex-basis将覆盖width的属性值滴呀*/

      background:black;

      width:200px;

      flex-grow:1;

 }

 .flex-item:nth-child(2){

      flex-basis:100px;

      background:green;

      flex-grow:2;

 }

</style>

</head>

<body>

   <div class="flex-container">

     <div class="flex-item">1</div>

     <div class="flex-item">2</div>

   </div>

</body>

</html>

效果：

flex-shrink（收缩比例）

默认值为1；（ps：收缩比例的算法和扩展算法是不一样的呢！）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

 .flex-container{

     width:400px;

     background:red;

     display:flex;

     border:1px solid red;

     /*

      超出的空间:400-(400+200)=-200;

      child要减去的空间:(1/3)*200=66.66

      最总的空间值:400-66.6=333.4(这种算法是错误滴呀)

      正确的算法：

      超出空间：400-(400+200)=-200;

      加权总和：400*1+200*2=800;

      child1被移除的比例:400*1/800*200=100

      child1的最终宽度:400-100=300

      同理可以求child2

     */

 }

 .flex-item:nth-child(1){

      flex-basis:400px;/*flex-basis将覆盖width的属性值滴呀*/

      background:black;

      flex-shrink:1;

 }

 .flex-item:nth-child(2){

      flex-basis:200px;

      background:green;

      flex-shrink:2;

 }

</style>

</head>

<body>

   <div class="flex-container">

     <div class="flex-item">1</div>

     <div class="flex-item">2</div>

   </div>

</body>

</html>

收缩前后对比：

flex:flex-grow | flex-shrink  | flex-basis

默认值：0 1 auto；

无论flex-item被填充的多款，只要我们设置

.flex-item:nth-child(1){flex:1}

.flex-item:nth-child(2){flex:2}

.flex-item:nth-child(1){flex:1}

它是将整个容器分成：1:2:1了，

如果我们这样设置：

.flex-item{flex:1},空间将均分，是整个容器空间，而不是多余的空间；

如果你加上了flex-basis，那么计算就更为复杂！

flex布局中flex-basis|flex-grow|flex-shrink的更多相关文章

  1. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  2. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  3. flex布局中transform出错

    在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...

  4. 关于flex布局中的兼容性问题

    这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...

  5. CSS 弹性盒子 flex的三个属性：grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  6. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  7. flex布局中父容器属性部分演示效果

    如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...

  8. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  9. flex布局中flex-shrink的计算规则

    下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...

随机推荐

  1. 小问题，小细节要注意（string类型转换为bool类型）

    一个表中的推荐字段是bit类型的,添加的时候推荐有两个值,如<asp:RadioButtonList ID="RadioButtonList1" runat="se ...

  2. oracle 存储过程 基础

    差不多一年没写过存储过程,最近要写,发现基本忘了,google一番之后,觉得很有必要把基础的东西写下来备忘. 语句块定义: decalre -- 变量声明 var1 ); -- 仅声明 var2 ) ...

  3. ASP.NET中Url重写后,打不开真正的Html页面

    不对IIS配置.html的映射,IIS站点目录下.html页面都能显示.当配置了.html的映射 IIS站点目录下真实存在的.html页面无法显示,错误信息:“页面无法显示”解决方法:1.首先照旧在网 ...

  4. js for循环，为什么一定要加var定义i变量

    我知道,有些人(譬如之前的我)写js的for循环时,都不习惯加上var,这当然是语法允许的.譬如下面. for(i=0;i<10;i++){//就不写成: var i=0 alert(i); } ...

  5. 未能找到Microsoft.Office.Core.MsoTriState的引用

    1.首先似乎没有找到这个引用,然后根据网上的教程,添加了Microsoft Office 12.0 Library,根据对象浏览器,查看此dll,有core,也有 MsoTriState也有,编译的时 ...

  6. hdu Waiting ten thousand years for Love

    被这道题坑到了,如果单纯的模拟题目所给的步骤,就会出现同一个位置要走两次的情况...所以对于bfs来说会很头痛. 第一个代码是wa掉的代码,经过调试才知道这个wa的有点惨,因为前面的操作有可能会阻止后 ...

  7. PB 简单笔记！

    1.总体说明: a) 程序不区分大小写 b) 赋值用=  –String city=“南京”,country ;Integer  person[3]={3,8,9};String s = ' You ...

  8. 10. 求N分之一序列前N项和

    求N分之一序列前N项和 #include <stdio.h> int main() { int i, n; double item, sum; while (scanf("%d& ...

  9. 数据库连接jdbc理解

    1.突然在想,既然数据库中有很多数据库,不同的database,在使用数据库时候,要指定使用的哪个数据库,用use database命令,指定特定数据库. 2.那java代码中,直接jdbc,直接st ...

  10. python 操作excel 使用笔记

    写入excel, 保存的过程中需要注意,保存格式xls后缀,如果用xlsx会报错 def set_style(name,height,bold=False): """&q ...