flex布局面试题（前端应知应会：flex布局详解）

本文目录

• 前端应知应会：flex布局详解
• 2022前端开发面试记录（深圳篇）
• 前端面试题系列之-CSS及页面布局篇
• 下列不属于flex布局属性的是（）
• flex弹性布局彻底掌握
• flex布局，看完这篇都懂了
• 【归纳】flex布局

前端应知应会：flex布局详解

前端应知应会：flex布局详解 flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。 flex布局全称flexible box布局模型，是一种比较高效的css3布局方案 通过设置元素的display属性，改成flex属性 来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。 首先看下容器的属性： 1、flex-direction 决定主轴的方向， 默认值是row即横向从左往右的顺序进行排列。 其他选项值还有row-reverse、column、column-reverse 2、flex-wrap 它决定了如果轴线排列不下去的话，如何进行换行 默认是不进行换行，继续沿着主轴方向放置。 其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反） 3、flex-flow 它是flex-firection和flex-wrap的简写 4、justify-content 该属性定义了item在主轴上的对齐方式 默认值是：flex-start即顺着主轴方向排列对齐 其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列 center：居中 space-between：两端对齐，项目之间间隔相等 space-around：每个项目两侧留白距离相等 5、align-items 该属性定义了项目在交叉轴上如何对齐 毕竟，每个item的高度不一定完全一样。 它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度 其他还有flex-start、flex-end、center、baseline 6、align-content 它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式 该参数有六个可选项： flex-start、flex-end、center、space-between、space-around、stretch 这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。 针对item，也有一些属性可以设置 1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列 2、flex-grow，决定了item的放大比例，默认为0不进行放大。 3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小 4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配 5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式 下面再举个例子 《!DOCTYPE html》 《html lang="en"》

2022前端开发面试记录（深圳篇）

2022年来到深圳，感觉到了与之前所在城市的差异，心里多少有点落差。虽然时机不太对吧，但是相信一切都会好起来的，给自己加油呀！ 整理了一些面试被问到的问题，虽然很多是无效面试，但是我也强行问了面试官，从他们的回答中猜测了一下他们关注的面试点，所以也算是有点收获吧，只是浪费了很多简历和路费，哭唧唧。

——1、区块链—— 1-1、vue生命周期； 1-2、vuex属性； 1-3、用户开始登录到登录成功都发生了什么； 1-4、git常用的命令；

——2、金融：vue—— 笔试： 2-1、深浅拷贝的区别，为什么会出现深浅拷贝，浅拷贝的优势； 2-2、强制中断 foreach 遍历； 2-3、多处组件复用； 2-4、你对前端是什么概念，前端在整个软件生态内是什么角色； 2-5、Vue2 中数据变化但视图没有发生同步更新，描述一下出现的场景，解决方式，以及该问题发生的可能原因； 2-6、nextTick 是如何确保开发者能够获取到最新的 DOM 状态的； 2-7、如何使用 mixins，有何利弊； 2-8、使用 Hooks 模式开发时，useMemo，useCallback 常用来作为优化的手段。描述一下它们各自的适用场景，以及背后的原理实现?； 2-9、前端从 Jquery 时代演变至如今的三大框架，这种演变的根源是什么，jquery 解决了什么问题，如今的三大框架又是为了解决什么问题出现的？ 视频面试： 2-10、js遍历树形结构，每个节点都有一个唯一ID，只能遍历一次； 2-11、组件封装的意义；

——3、知识产权：vue2、vue3、ts、react—— 3-1、说一说面向对象的理解，包括继承、封装、多态等； 3-2、说一说promise； 3-3、webpack优化； 3-4、vuex使用场景； 3-5、描述一下对vue响应式原理的理解； 3-6、vue生命周期； 3-7、父子组件钩子函数执行顺序； 3-8、v-if和v-show； 3-9、js数据类型； 3-10、实现深拷贝；

——4、物流—— 4-1、vue生命周期； 4-2、生命周期-修改元素样式在生命周期的哪个阶段； 4-3、生命周期-修改数据在哪个阶段； 4-4、生命周期-destroy里面会做哪些操作； 4-5、怎么修改title的内容； 4-6、父子组件传参的具体写法； 4-7、v-model的多种写法； 4-8、js数据类型； 4-9、判断数组的方法； 4-10、实现左边固定右边自适应的布局； 4-11、实现div垂直水平居中； 4-12、flex:1； 4-13、flex详解； 4-14、call,apply,bind是干什么的；

——5、新兴产业—— 5-1、封装路由，怎么拦截路由； 5-2、浏览器缓存有哪些，又问localStorage和sessionStrorage的区别和应用场景； 5-3、浏览器强缓存和协商缓存； 5-4、webpack打包机制，构建过程和配置； 5-5、性能优化方法； 5-6、前端的业务和后端的API是怎么做到数据实时请求的（问的其实是前端对后端API接口的封装和管理）； 5-7、computed和watch； 5-8、说了几个关于大屏的应用场景，有没有做过，怎么做的；

——6、某水果：vue2、vue3、ts、各种前沿技术都用—— 6-1、怎么封装一个组件库/工具类库，比如vue封装过什么复杂组件，jquery封装过什么类库； 6-2、get和post的区别，传参格式等； 6-3、promise怎么用的； 6-4、原型链，test()的原型链； 6-5、websocket； 6-6、es6中的generator； 6-7、es6中的set和map有啥区别，set为什么能去重； 6-8、项目难点；

——7、医疗健康：vue—— 7-1、vue自定义指令配置； 7-2、webpack的理解； 7-3、对node的了解，用过express吗； 7-4、项目中的拖拽是怎么做的； 7-5、websocket和socket的区别； 7-6、听过mqtt吗，因为没听过所以解释了一下activemq的用法； 7-7、二维地图的聚合，如果有十万个点，会做什么优化； 7-8、地图实现多个点连成一条线会怎么做； 7-9、地图实现一条曲线； 7-10、内网下git怎么用的； 7-11、openlayers渲染机制； 7-12、父子组件通信方法； 7-13、router中实现拦截； 7-14、对象合并的方法； 7-15、父子组件的生命周期执行顺序，渲染阶段为什么会先执行父组件再执行子组件； 7-16、vue生命周期； 7-17、npm run dev, run build可以在项目中的什么位置找到； 7-18、vue中跳转页面的方法； 7-19、mixins用过吗； 7-20、判断引用类型的方法； 7-21、js数据类型； 7-22、判断基本数据类型的方法； 7-23、for in和for of的用法和区别，两者遍历的是索引还是属性值，两者都可以遍历对象吗； 7-24、foreach和map的区别，两者会不会改变原数组； 7-25、主要用什么技术栈； 7-26、行内元素和块级元素的区别，分别都有哪些，行块级元素有哪些； 7-27、div垂直水平居中，grid知不知道怎么用； 7-28、splice和slice；

——8、智慧园区：vue2、vue3、ts、uniapp—— 8-1、flex了解吗，flex布局方向，flex:1 0的页面效果是怎样的； 8-2、做过移动端吗，了解uniapp吗； 8-3、keep-alive；问了一个没听明白的，可能和keep-alive有关系； 8-4、vuex中的action；不用vuex，怎么代替vuex； 8-5、promise.all和promise.on； 8-6、防止表单重复提交； 8-7、async，await的使用； 8-8、vue3和ts的了解； 8-9、防抖怎么控制时间； 8-10、vue中的data为什么要设计成一个函数；

——9、智慧工地：vue、uniapp、小程序—— 9-1、Vuex是干什么的； 9-2、openlayers怎么用的； 9-3、性能优化； 9-4、spa首屏加载优化； 9-5、bundler.js太大，打包怎么优化； 9-6、加密方式了解多少，比如md5,base64等，一大堆没听过的； 9-7、冒泡排序的实现原理； 9-8、js设计模式；

——10、某快递公司外包—— 10-1、一棵树的数据，给的是列表格式，转换成树形结构； 10-2、项目相关的，聊天怎么做的，拖拽怎么做的，拖拽的数据怎么渲染的，拖拽重叠怎么处理的； 10-3、js设计模式；

——11、三维：vue、cesium—— 11-1、一棵树的数据，给的是列表格式，转换成树形结构； 11-2、openlayers怎么用的，发布过wms吗，发布流程是怎样的； 11-3、openlayers转换经纬度的方法名是什么； 11-4、cesium常用的函数； 11-5、vue数据双向绑定原理； 11-6、Vue中data属性如果改变一个数组的下标，会不会马上发生变化，不变化可以怎么解决 11-7、数组常用方法有哪些； 11-8、 map和filter的区别； 11-9、es6常用的方法； 11-10、父子组件通信，兄弟组件通信； 11-11、new具体进行了什么操作；

——12、医疗：vue、angular—— 12-1、js渲染机制和运行机制； 12-2、vue数据绑定原理；

——13、建设行业：vue、uniapp—— 笔试： 13-1、||与&运算符； 13-2、垂直居中方案； 13-3、let a=arr, b=a, c=arr.concat(), a=3，打印b和c，应该是深浅拷贝； 13-4、实现font-size:12；***隐藏网址*** 13-6、微信小程序流程和主要文件； 13-7、获取url参数及内容； 13-8、$(function(){}) / (function(){}) / (function(){})()的区别； 13-9、前端优化方案； 面试： 13-10、项目难点； 13-11、git工作流； 13-12、jquery项目会不会用webpack打包； 13-13、webpack优化； 13-14、web优化；

——14、文化：uniapp—— 14-1、ssr渲染； 14-2、ajax和axios的区别； 14-3、cookie和session的区别； 14-4、vue生命周期； 14-5、数据请求写在哪个生命周期中； 14-6、router的history模式和hash模式； 14-7、工作中的开发流程； 14-8、uniapp的开发流程和坑； 14-9、uniapp滑动问题，下滑切换视频不生效，一般是什么原因； 14-10、uniapp加载速度慢，点击加载图片速度太慢，一般是什么原因；

——15、企业平台某外包：vue，node，性能优化—— 15-1、说一说websocket； 15-2、vue数据双向绑定原理； 15-3、项目难点； 15-4、对mvvm、mvc、mvp等的理解； 15-5、vue的常见指令； 15-6、computed和watch； 15-7、class和style怎么绑定； 15-8、ajax和axios的区别； 15-9、axios拦截器，axios的post请求； 15-10、对前端渲染，服务端渲染的理解；

——16、智慧城市：vue，node，three.js—— 16-1、vue生命周期； 16-2、vue组件通信方法； 16-3、js的继承； 16-4、oracle、mysql、sqllite的区别； 16-5、oracle连表查询； 16-6、openlayers项目场景； 16-7、cesium项目场景；

——17、租房：jquery+layui，vue2—— 17-1、笔试： 17-2、foo打印题； 17-3、this打印题； 17-4、变量提升打印题； 17-5、let arr= 把数组扁平化成一个数组，并进行去重升序; 17-6、let a=; 求b在a中第一次出现的位置； 17-7、面试：主要问项目

——18、跑腿：vue2，vue3+ts—— 18-1、对html5语义化的理解； 18-2、css实现一个三角形； 18-3、css怎么实现0.5px的线，为什么有这种需求，涉及到兼容性问题； 18-4、怎么解决变量提升的问题； 18-5、es6新增了哪些定义变量的方式； 18-6、const定义的变量可以被修改吗； 18-7、map和filter的区别，会改变原数组吗； 18-8、es6去重的方法； 18-9、谈一谈对promise的理解； 18-10、除了链式调用，promise还可以怎么处理同步请求(async/await)； 18-11、对vue响应式原理的理解，核心是什么； 18-12、对vue生命周期每个阶段的理解； 18-13、为什么要用key，key有什么作用； 18-14、v-if和v-show； 18-15、Vue中data为什么是一个函数； 18-16、vue各场景下的传值方式有哪些，比如父子组件，兄弟组件，祖孙组件； 18-17、对vuex的理解和使用场景； 18-18、vue常见修饰符； 18-19、Vue3用过吗(因为没用过，所以就只针对响应式原理说了一下vue3和vue2的区别)；

——19、实业：jquery，vue2，vue3—— 笔试：需要解释 19-1、html5新标签，css3新特性； 19-2、js+css3实现某元素以50px每秒的速度左移100px； 19-3、css实现左中右布局，不改变文档流； 19-4、js兼容性有哪些，以及常见的解决方案； 19-5、描述一下事件循环机制eventloop，eventloop解决了什么问题； 19-6、给了一个题，大概是后端返回的接口数据，data的格式有很多，比如null，对象，数组，字符串等，怎么处理这种问题； 19-7、前端性能优化方法，首屏页面怎么优化； 19-8、用js写一个方法实现数据去重并排序(用es5和es6+实现)； 19-9、给定一个数组，把数组中为0的往后排，其他值按顺序排序; （示例：） 19-10、用0，1，2代表红黄蓝三种颜色，实现以下排序，不能用array.sort实现;（示例：） 面试： 19-11、flex布局；flex:1对应的属性； 19-12、讲一下原型链； proto 和prototype有什么区别；字符串有没有原型；给定一个str，str.test()调用的谁的test方法； 19-13、讲一下闭包；什么情况下才能算是闭包；形成闭包的条件；列了三个题让你判断是不是闭包； 19-14、v-if和v-show是干什么的；应用场景有哪些；给定一对父子组件，默认值是false，另外有一个ajax请求，值发生了以下变化（false true false true true），在v-show和v-if中，父子组件的哪个阶段里会请求ajax； 19-15、computed的实现原理，怎么实现一个computed； 19-16、css中，transform，margin，position的都是怎么渲染的，渲染机制是什么；amd，cmd，commonjs了解吗；

前端面试题系列之-CSS及页面布局篇

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：

设置到项目上的属性：

(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

上述方法都可以创建BFC，但是会带来一些负面影响：

::before是css3的写法，:before是css2的写法，用来设置对象前的内容 :before的兼容性要比::before好

更准确的说法

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；　　　　 2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；　　　　 3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；　　　　 4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

常规方法

不需要使用transform属性时

webkit内核

参考链接： CSS实现不换行/自动换行/文本超出隐藏显示省略号

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能

@import规则一定要先于除了@charset的其他任何CSS规则。

不推荐使用@import:

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

伪元素和伪类的区别总结

css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

相关链接： CSS 继承，哪些属性能继承，哪些不能

z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块

设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

1英寸（inch）=2.54厘米（cm）

手机对角线的长度换算成英寸

屏幕横向和纵向的像素点

1px即代表一个物理像素点/像素块

PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）

1px与多少厘米之间是不能直接划等号的，需要看分辨率。

一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px； 很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。

参考链接： 画一条0.5px的线

在继承性上：

一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。

下列不属于flex布局属性的是（）

下列不属于flex布局属性的是（）。 A.flex：1B.display：flexC.flex-direction：rowD.float：left正确答案：D

flex弹性布局彻底掌握

flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。 1.flex container 2.flex items 如图所示： flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图： 默认情况下flex的排列方向为main start到main end，当切换到其他属性时： flex-direction：row-reverse flex-direction：column-reverse 1.2justify-content属性 justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。 justify-content：center justify-content：flex-end justify-content：space-between 是每个items间隔相等 justify-content：space-around items间的间隔是边缘间隔的两倍 1.3align-items align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如： align-items：flex-start items与cross start对齐 1.4flex-wrap flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container 1.6align-content align-content：flex-start（这就解决了上述中换行没有紧挨的问题） align-content：flex-end align-content：center align-content：space-between（两端cross start 与cross end对齐） align-content：space-around（与justify-content一样） align-content：space-evenly 二、flex items上的css属性 2.1order order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。 2.3flex-grow flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：

flex布局，看完这篇都懂了

flex布局 开启flex布局 display:flex (独占一行) inline-flex(允许换行) 应用在flex container上的css属性 应用在flex items上的css属性 flex container的属性: justify-content: 决定了 flex items在主轴(main axis)上的对齐方式 flex-start(默认值):与main start 对齐 flex-end:与main end 对齐 center:居中对齐 space-between: flex items之间的距离相等. 与main start,mian end两端对齐 space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离 space-around: flex items之间的具体相等 align-items 决定了flex item在cross axis上的对齐方式 flex-wrap 决定了单行还是多行 flex-flow是 flex-direction || flex-warp的缩写 flex-flow: row-reverse 等价于 flex-direction:row-reverse flex-wrap:nowrap align-content 决定了多行flex items在cross axis 上的对齐方式,用法和justify-content类似 stretch(默认值):与align-items的stretch类似 在cross axis上拉伸 flex-start:与cross start对齐 flex-end:与cross end对齐 center:居中对齐 align-self flex items可以通过设置align-self覆盖flex container设置align-items auto(默认值):遵从flex container的align-items stretch,flex-start,flex-end,center,baseline效果跟align-items一致 flex-shrink 决定了flex items如何收缩 可以设置任意非负数字(正小数,正整数,0),默认值是1 当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效 每个flex item收缩的size为 flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和 收缩比例 = flex - shrink * flex item的base size base size 就是flex item 放入flex container之前的size flex items收缩后的最终size不能小于 min-width\min-height flex-grow 决定了flex items如何扩展 可以设置任意非负数字(正小数,正整数,0),默认值是0 放flex container 在main axis 方向上有剩余size时,flex-grow属性才会有效 如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size * flex-grow/sum 如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为 flex container 的剩余size * flex-grow flex items 扩展后的最终size不能超过max-width\max-height 举例:flex-direction为row的情况下 父容器宽度 400px 有三个子容器宽度均为100, flex-grow分别为1,2,3 这样可以得出 A的宽度= 100 * (1/6) + 100 = 116.66 B的宽度 = 100 * (2/6) + 100 = 133.33 C的宽度 = 100 * (3/6) + 100 = 150 若 flex-grow分别为 0.1 ,0.2,0.3,则结果为: A的宽度= 100 * 0.1 + 100 = 110 B的宽度 = 100 * 0.2 + 100 = 120 C的宽度 = 100 * 0.3 + 100 = 130 flex-shrink 决定了 flex items 如何收缩 可以设置任意非负数组(正小数,正整数,0),默认值是1 当flex items在main axis方向上超过了flex container 的size,flex-shrink属性才会有效 每个flex item 收缩的size为 flex items超出flex container 的size * 收缩比例/所有flex items的收缩比例之和 收缩比例 = flex-shrink * flex item的base size base size就是flex item 放入 flex container之前的size flex item收缩后的最终size不能小于min-width\min-height 举例:总容器宽度 500px 一共六个子视图, 宽度分别为110,120,130,140,150,160, shrink为1,2,3,4,5,6, 总长度:110+120+130+140+150+160 = 810 总共得收缩的长度:810 - 500 = 310 收缩比例 是 flex-shrink * item的 主轴方向的size sum = 110 * 1 + 120 * 2 + 130 * 3 + 140 * 4 + 150 * 5+ 160 * 6 item1的收缩比例是 110 * 1 需要收缩的具体为 310 * (110 * 1)/sum item2的收缩比例是 120 * 1 需要收缩的具体为 310 * (120 * 2)/sum item3的收缩比例是 130 * 1 需要收缩的具体为 310 * (130 * 3)/sum item4的收缩比例是 140 * 1 需要收缩的具体为 310 * (140 * 4)/sum item5的收缩比例是 150 * 1 需要收缩的具体为 310 * (150 * 5)/sum item6的收缩比例是 160 * 1 需要收缩的具体为 310 * (160 * 6)/sum flex-basis 设置flex items在 main axis方向的base size auto(默认值) content 取决于内容本身的size 决定flex-item最终base size 的因素 优先级从高到低 max-width max-height min-width min-height flex-basis width height 内容本身的size flex-basis 0 flex-group 1 联合使用的效果: flex是flex-grow flex- shrink? || flex-basis 默认值是0 1 auto none: 0 0 auto

【归纳】flex布局

说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种： 这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点： 接下来就将对flex布局的几个重要知识点进行归纳。 采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。 如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。 flex container（flex容器）有如下六个属性： 该属性主要有以下值： 该属性主要有以下值： 默认值为row nowrap，可以以如下方法设定该属性： 该属性主要有以下值： 该属性主要有以下值： 该属性主要有以下值： flex item（子元素）有如下六个属性： 该属性默认值为0。 如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。 该属性默认值为1。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。 默认值为0 1 auto。可以以如下方式设定该属性： 数值越小，排列越靠前，默认为0。 即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧 如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto; 实现手机上中下布局： 以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。 ***隐藏网址***