转载自: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. Xgboost总结

    从决策树.随机森林.GBDT最终到XGBoost,每个热门算法都不是孤立存在的,而是基于一系列算法的改进与优化.决策树算法简单易懂可解释性强,但是过拟合风险很大,应用场景有限:随机森林采用Baggin ...

  2. 2000w数据,redis中只存放20w的数据,如何保证redis中的数据都是热点数据

    redis 内存数据集大小上升到一定大小的时候,就会施行数据淘汰策略. redis 提供 6种数据淘汰策略:voltile-lru:从已设置过期时间的数据集(server.db[i].expires) ...

  3. python安装setup.py问题

    一:python下setuptools安装( No module named setuptools 解决方案) 1. 下载:在它的官网可以下载到安装包:https://pypi.python.org/ ...

  4. Django框架详细介绍---Form表单

    一.概述 在HTML页面中,利用form表单向后端提交数据时,需要编写input等输入标签并用form标签包裹起来,与此同时,在很多应用场景之下需要对用户输入的数据校验,例如注册登录页面中,校验用户注 ...

  5. Django框架详细介绍---中间件(认证)

    一.绪论 在cookie和session的应用中,通过在视图函数内添加装饰器判断用户是否登录,把没有登录的用户请求跳转到登录页面,通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可 ...

  6. SQL 一列数据整合为一条数据

    SQL 一列数据整合为一条数据: SELECT  STUFF(( SELECT distinct  ',' + 列名 FROM 表名 where  [条件] FOR XML PATH('') ), 1 ...

  7. Docker从零构建php-nginx-alpine镜像

    虽然之前也曾用docker环境运行了一些项目,但对于镜像这块还不是很理解,且鉴于网上现成的镜像都包含太多用不到的库,所以决定从零开始构建一个自己的镜像. alpine linux为基础镜像 docke ...

  8. Two (DP)

    题意:求两串数字有多少个相同的子串,子串不要求连续. 思路:直接DP,dp[i][j] 代表A串长度为i.B串为j时满足条件的子串个数.转移dp[i][j] = dp[i -1][j] + dp[i] ...

  9. python中sorted()和set()去重,排序

    前言 在看一个聊天机器人的神经网络模型训练前准备训练数据,需要对训练材料做处理(转化成张量)需要先提炼词干,然后对词干做去重和排序 words = sorted(list(set(words))) 对 ...

  10. kubernetes集群pod使用tc进行网络资源限额

    kubernetes集群pod使用tc进行网络资源限额 Docker容器可以实现CPU,内存,磁盘的IO限额,但是没有实现网络IO的限额.主要原因是在实际使用中,构建的网络环境是往超级复杂的大型网络. ...