flex 自适应
flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的。
其中,这三个属性都是在子元素上设置的。
注:下面讲的父元素,指以flex布局的元素(display:flex)。
flex-basis
该属性来设置该元素的宽度。当然,width
也可以用来设置元素宽度。如果元素上同时设置了width
和flex-basis
,那么flex-basis
会覆盖width
的值。
flex-grow
该属性来设置,当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。
flex-grow
的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。
举个例子:
父元素宽400px,有两子元素:A和B。A宽为100px,B宽为200px。
则空余空间为 400-(100+200)= 100px。
如果A,B都不索取剩余空间,则有100px的空余空间。
如果A索取剩余空间:设置flex-grow为1,B不索取。则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px
如果A,B都设索取剩余空间,A设置flex-grow为1,B设置flex-grow为2。则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px * (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px * (2/(1+2)))
flex-shrink
该属性来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。
flex-shrink
的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
举个例子:
父元素宽400px,有两子元素:A和B。A宽为200px,B宽为300px。
则A,B总共超出父元素的宽度为(200+300)- 400 = 100px。
如果A,B都不减小宽度,即都设置flex-shrink为0,则会有100px的宽度超出父元素。
如果A不减小宽度:设置flex-shrink为0,B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px
如果A,B都减小宽度,A设置flex-shirk为3,B设置flex-shirk为2。则最终A的大小为 自身宽度(200px)- A减小的宽度(100px *
(200px *
3/(200 *
3 + 300 *
2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px *
(300px *
2/(200 *
3 + 300 *
2))) = 250px
flex 自适应的更多相关文章
- flex自适应高度内容高度超出容器高度自动出现滚动条的问题
在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...
- flex自适应宽度显示省略号
text-overflow:ellipsis文本溢出显示省略号,一般的搭配用法如下: div{ text-overflow:ellipsis; overflow:hidden; white-space ...
- flex自适应小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端flex自适应方案。(px to rem)
define(function (require, exports, module) { exports.mobileUtilMethod = function () { (function (e, ...
- flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...
- (有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug
项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...
- flex布局语法+实例
一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...
- css之布局
布局一直是页面制作很重要的部分,有个良好的布局不仅在页面上呈现很好的效果,还对后续功能扩展有重要的作用.本文主要讨论一下几种布局: 水平居中布局 垂直居中布局 多列布局 自适应布局 stracky-f ...
- BizCharts使用采坑教程
了不起的BizCharts 最近项目的管理后台都在用阿里粑粑开源的管理框架Ant Design Pro,说真话,还是比较好用的.该框架内部也封装了一些图标插件,但是在最近的一个项目中发现,这些图标 ...
随机推荐
- 打包jar问题
一. 先说一下一般是动态布局最好,效率高,动态就是java写布局,这是 老外的专长,一般res目录是不能打包的,布局动态写,其余的就是图片什么的了,可以建一个assess文件夹,把图片放里面,打jar ...
- Android MVP开发模式及Retrofit + RxJava封装
代码已上传到Github,因为接口都是模拟无法进行测试,明白大概的逻辑就行了! 欢迎浏览我的博客--https://pushy.site 1. MVP模式 1.1 介绍 如果熟悉MVP模式架构的话,对 ...
- Object equals 方法
package com.mydemo.controller; public class TestEquals { public static void main(String[] args) { Do ...
- RHEL7系统管理之资源管理
1. CGroup(控制群组).slice(切片).scop.service 控制群组(control group)是linux kernel的一项功能, 该功能允许linux对RHEL7中syste ...
- redis集群热扩展(基于4.0.9)
1:环境说明,首先说一下要做的事情,我们要迁移redis集群槽位,现有redis集群环境如下 我们看一下集群的基本信息: > cluster nodes 8ea64a0049e0b193296a ...
- js 时间日期函数小结
Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month &quo ...
- 关于easyUI
<input class="easyui-combobox" id="s_dataDicName" data-options="panelHei ...
- DES加密(支持ARC与MRC)
DES加密(支持ARC与MRC) 源文件: YXCrypto.h 与 YXCrypto.m // // YXCrypto.h // 用秘钥给字符串加密或者解密 // // Created by You ...
- [翻译] NSRegexTester
NSRegexTester This is a very simple Mac OS X application that allows you to test regular expressions ...
- Linux rpm命令详解
rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...