flex布局之flex-grow和flex-shrink如何计算
此文已由作者张含会授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
关于盒模型布局
如何实现两栏布局?
(表格)
流式,
浮动,
定位
如何选择?
流式 > 浮动 > 定位
弹性盒模型FlexBox
容器和项目 .box .item
设置容器flex布局
.box{ display: flex;
}// 行内元素
.box{ display: inline-flex; }
容器属性
flex-direction 容器内项目的排列方向(常用)
.box { flex-direction: row | row-reverse | column | column-reverse; }
flex-wrap 容器内项目换行方式
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
注意:有些浏览器不支持flex-flow 是flex-direction和flex-wrap的简写属性
justify-content 容器内项目的水平对其方式 (常用)
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items 容器内项目的垂直对齐方式(常用)
.box { align-items: stretch | flex-start | flex-end | center | baseline ; }
align-content 容器内项目的垂直对齐方式,多行生效,单行不生效
.box {
align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
}
所以需要记住: flex-direction,justify-content,align-items
项目属性
order 排列顺序,越小越靠前,默认为0,可以为负数
.item{ order: <integer>; }
flex-grow 扩张比例,默认为0
.item{ flex-grow: <number>; }
flex-shrink 收缩比例,默认为1
.item{ flex-shrink: <number>; }
flex-basis 分配多余空间前占据的空间
.item { flex-basis: auto | <length>; /* default auto */
}flex 是 flex-grow,flex-shrink,flex-basis 的简写
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{ flex: 1; }
align-self 项目的对齐方式,覆盖容器align-items的值
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
项目属性要记住flex
flex-grow 和 flex-shrink如何计算?
flex-grow
对于剩余空间,按照一定的比例分配到项目,以下例子的分配过程如下:
先计算剩余空间1000-200-400-200=200
剩余空间被分成4份,item1占2/4,item2占1/4,item3占1/4
item1共占200+200x2/4=300,item2共占400+200x1/4=450,item3共占200+200x1/4=250
<div class="box">
<div class="item">100</div>
<div class="item">200</div>
<div class="item">300</div>
</div> .box {
display: flex;
width: 1000px;
height: 300px;
}
.item{
height: 50px;
}
.item:first-child{
flex: 200px 2 1;
}
.item:nth-child(2){
flex: 400px 1 2;
}
.item:nth-child(3){
flex: 200px 1 1;
}
flex-shrink
对于溢出空间,按照一定的比例收缩到项目,以下例子的分配过程如下:
计算溢出空间200+400+200-400=400
注意flex-shrink是收缩比例, 是基于项目宽度的,加入item1的宽度需要收缩n的比例能满足条件,根据设置item2应该收缩2n,item2的收缩比例是n,200xn+400x2n+200xn=400,所以n=1/3(0.33)
item1所占的宽度为200x(1-0.33)=133.33,item2所占宽度为400x(1-2x0.33)=133.33,item3所占空间为200x(1-0.33)=133.33
注意:
如果设置item1的收缩比是1,item2的收缩比是100,item3的收缩比是1,根据公式计算收缩比例是1/1001,item2所占空间为400x(1-100x(1/1001)),约等于0,很明显,如果是0,项目内容是没办法显示的,所以项目的空间不会全部收缩,肯定会预留下项目内容所需要的最小空间,这时候的计算方式会发生变化,假设item2内容所占最小空间为20,所以item2只能收缩掉400-20=380,剩余20按比例收缩在item1和item3。
<div class="box">
<div class="item">100</div>
<div class="item">200</div>
<div class="item">300</div>
</div>
.box { display: flex; width: 400px; height: 300px;
box-sizing: border-box; background: #0f0;
justify-content: space-around;
}
.item{
box-sizing: border-box; height: 50px;
background: #f00; color: #fff;
line-height: 50px;
}
.item:first-child{ flex: 200px 1 1;
}
.item:nth-child(2){ flex: 400px 1 2;
}
.item:nth-child(3){ flex: 200px 1 1;
}
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 JVM运行内存分配和回收
【推荐】 Kylin存储和查询的分片问题
flex布局之flex-grow和flex-shrink如何计算的更多相关文章
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- Flex 布局知识点梳理
传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...
- CSS之Flex 布局
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- Flex布局在小程序的使用
一篇旧文,上手小程序时做的一些探索 Flex布局是一种十分灵活方便的布局方式,目前主流的现代浏览器基本都实现了对Flex布局的完全支持.而在微信小程序中,IOS端使用的渲染引擎WKWebView和安卓 ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
随机推荐
- h5新增属性本地存储
---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage 针对一个ses ...
- 解决IE下面诡异地使用quickrIE5模式打开页面的有关问题
解决IE下面诡异地使用quickrIE5模式打开页面的有关问题 <!doctype html public "-//w3c//dtd html 4.01 transitional//e ...
- String和string
String和string的区别 从位置讲: 1.String是.NET Framework里面的String,小写的string是C#语言中的string 2.如果把using ...
- int _tmain(int argc, _TCHAR* argv[])
int _tmain(int argc, _TCHAR* argv[]){ int i; for (i = 0; i<argc; i++) cout<<argv[i]<< ...
- 第六十三课、C语言的异常处理
http://www.cnblogs.com/gui-lin/p/6379101.html 一.异常处理 1.异常的概念 (1).程序在运行过程中可能产生异常 (2).异常(Exception)和Bu ...
- Angular4中常用管道
通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道. 一.大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小 ...
- Drupal相关网站推荐
http://nodeone.se/ drupal7安装过程中,如果选择简体中文,到导入翻译时出现错误,原因是执行超时了. 方法一: 修改php.ini文件:memory_limit = 256M ( ...
- Scanner和 Random类,控制语句的例题,商品管理(直接赋值)
Scanner类的使用: import java.util.Scanner; class Demo02 { public static void main(String[] args) { //1.导 ...
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- CSS清除浮动方法总结
什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...