转载自:https://blog.csdn.net/fengyjch/article/details/79047908

flex 是 flex-growflex-shrinkflex-basis的缩写

flex 的默认值是以上三个属性值的组合,flex 的默认值是 0 1 auto。

当 flex 取值为 none,则计算值为 0 0 auto;

当 flex 取值为 auto,则计算值为 1 1 auto;

当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:

.item {flex:;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}

当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况

.item-1 {flex: 0%;}
.item-1 {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow:;
flex-shrink:;
flex-basis: 24px;
}

当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,如下是等同的:

.item {flex: 2 3;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}

当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1,如下是等同的:

.item {flex: 2333 3222px;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 3222px;
}

flex-basis 规定的是子元素的基准值。

    <div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div> <style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
  • 主轴上父容器总尺寸为 600px

  • 子元素的总基准值是:0% + auto + 200px = 300px,其中

    1. - 0% 即 0 宽度
    2. - auto 对应取主尺寸即 100px
  • 故剩余空间为 600px - 300px = 300px

  • 伸缩放大系数之和为: 2 + 2 + 1 = 5

  • 剩余空间分配如下:

    1. - item-1 和 item-2 各分配 2/5,各得 120px
    2. - item-3 分配 1/5,得 60px
  • 各项目最终宽度为:

    1. - item-1 = 0% + 120px = 120px
    2. - item-2 = auto + 120px = 220px
    3. - item-3 = 200px + 60px = 260px
  • 当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设

  • 而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间

flex:1详解(转)的更多相关文章

  1. flex:1和flex:auto详解

    flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...

  2. flex布局详解

    1.背景介绍 传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C ...

  3. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  4. react-native flex 布局 详解

    而在React Native中,有4个容器属性,2个项目属性,分别是: 容器属性:flexDirection   flexWrap   justifyContent  alignItems 项目属性( ...

  5. display:flex 布局详解(2)

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  6. css3 flex布局详解

    原文链接: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool https://www.cnblog ...

  7. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  8. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  9. 微信小程序flex容器属性详解

    flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...

随机推荐

  1. iPhone手机屏幕尺寸(分辨率)

    第一代iPhone2G屏幕为3.5英吋,分辨率为320*480像素,比例为3:2. 第二代iPhone3G屏幕为3.5英吋,分辨率为320*480像素,比例为3:2. 第三代iPhone3GS屏幕为3 ...

  2. react脚手架搭建

    1.npm install -g create-react-app 2.create-react-app react-demo 3.cd react-demo 4.npm start

  3. 在C#中,Newtonsoft.Json + dynamic动态解析jsonString,jsonString转实体

    记录一下 引用 using Newtonsoft.Json; using Newtonsoft.Json.Linq; var jsonString = "{\"ApiResourc ...

  4. des加密算法java&c#

    项目中用到的数据加密方式是ECB模式的DES加密得到的十六进制字符串.技术支持让写一个.net版的加密算法.这里做一下记录. java版: 16进制使用的是bouncycastle. import c ...

  5. 获取上一行记录lag

    SELECT EMPLID ,EFFDT ,END_DT ,COMPANY ,DEPTID ,POSITION_NBR ,' ' ,' ' FROM ( SELECT J1.EMPLID ,J1.EF ...

  6. 第九届蓝桥杯C/C++B组省赛感想

    因为做了近三年的初赛题,都对了5题+,所以这次比赛前信心满满,心里想最少水个省二没问题.可我怎么知道今年的套路居然和以前不一样了!一题深搜都没有,想想一周前做的第七届初赛题,10题有3.4题深搜题. ...

  7. Spring Boot:快速入门(二)

    学习完成怎么搭建一个独立Spring Boot项目后,上面是整理出来的一些相关文件以及用途. 原本是一个Excel文件,拷贝到博客园就成了图片,当做几个笔记了,用到的时候可以查阅,也欢迎转载,收藏. ...

  8. ubuntu装好jupyter启动失败问题

    ::/jupyter/nbserver-.json: [Errno ] Permission denied: '/run/user/1000/jupyter/nbserver-35390.json' ...

  9. centos7安装nginx1.10.1

    安装nginx. 1.首先在根目录下创建一个software文件夹用来存储下载的压缩包. 2.然后cd跳转的software文件夹下,进行压缩包的下载 wget -c https://nginx.or ...

  10. php中 "$$" 的详解

    php中 $$str 这种写法称为可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = " ...