flex布局有什么弊端（flex 布局中固定宽度不起作用，被压缩了）

本文目录

• flex 布局中固定宽度不起作用，被压缩了
• flex实现瀑布流布局为什么不适合动态加载数据
• 各种网页设计布局的优缺点
• 关于flex弹性布局子元素添加padding问题
• 解决用flex布局时内容可能溢出的问题
• 自定义页面分栏布局
• 请问，css中Float和flex布局的优缺点
• css中，用flex和百分比优势劣势

flex 布局中固定宽度不起作用，被压缩了

grid 有7个，每个150rpx，按道理屏幕应该展示不了这么多，需要滚动观看，实际上全部展示出来了，只是 grid 宽度没有150rpx这么多，被压缩了。

这里要用到 flex-shrink 这个属性， flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex 元素仅在 默认宽度之和大于容器 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

给 grid 加上 flex-shrink: 0; 。

这样项目就不会被压缩了。

flex实现瀑布流布局为什么不适合动态加载数据

瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置top值和left值定位每个元素。

各种网页设计布局的优缺点

静态布局也叫做固定布局，网页内容区采⽤绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置最小宽度min-width，当分辨率小于最小宽度就会出现滚动条，如果大于最小宽度则内容居中外加背景 。

应用场景 目前大部分的高校官网、医院官网、政府网站等都是静态布局，而且设计风格上也很老旧，当然并不是说静态布局的风格就是老旧，这个布局和设计风格没有多大关系，有很多新闻门户类、企业官网等网站采用静态布局，同样也很出彩。
优点 这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低
缺点 在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。

流式布局是指页面按照百分比%定义宽度（也就是长度单位不是我们平常使用的px，而是百分数），来适配不同的屏幕分辨率，在不同的分辨率下网页布局保持不变，一般搭配min-、max-属性来控制尺寸流动范围，以免过大或者过小影响展示和阅读，页面内元素的高度和文字大小往往px来固定住，方便页面排版和阅读。流式布局的特点是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

应用场景 流式布局典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。
优点 在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。
缺点 当屏幕分辨率差异过大时，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，有些页面元素宽度被拉的很高，页面缩小后，一些字或者图片或者图表等会产生堆叠，显示效果不太好控制。

响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。

优点 能够适应pc、pad和移动端，在任何尺寸的屏幕上都能呈现完美的视觉效果
缺点 要匹配足够多的屏幕大小，需要设计多个版本，设计和开发工作量大

弹性布局翻译过来不是em/rem layout ，因为弹性布局采用的单位是em或者rem，为了直观，所以直接采用了单位缩写去区分。em和rem是一个相对长度单位，页面内各元素的尺寸采用em/rem做单位，em是相对其父元素大小，rem是始终相对于html大小，即页面根元素。

优点 弹性适配不同的分辨率，视觉效果比较好
缺点 em以父节点font-size大小为参考点，进行任何元素设置，都需要知道他父元素的大小，容易造成页面排版混乱，rem支持的浏览器比较少。

个人理解的，felx布局主要是用来定义页面内某些元素相对于父级元素的对齐、排序、分布等排版方式，通过调整父级内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。

优点 能够很好的契合移动端，无需考虑分辨率问题，移动端flex布局占据主流
缺点 PC端网页兼容性不好，ie浏览器必须是10.0版本以上；对设计稿要求很高，需要是有规律的设计稿，比如栅格系统；网页内容较多时，flex布局不太好控制。

关于flex弹性布局子元素添加padding问题

在使用flex布局时，如果直接为子级元素添加padding的话，其宽度会压迫其他兄弟元素的空间。如以下布局。

本意是设置一个弹性布局，然后每个子元素各占三分之一，然后第二个元素设置一个向右的padding值。但由于第二个子元素添加了padding: 60px的内边距导致其余两个兄弟元素的宽度受到压挤，效果如下：
而flex布局的盒模型box-sizing是content-box,是不包含内边距的。也就是第二个子元素设定的padding-right要先从father里减去。则分到每个子元素的宽度是 px。第二个子元素的宽度要加上60，所有最终分配的宽度就如上图所示了。

解决这个问题有两个办法
1.子元素内加一个标签包裹弹性内容。在内标签中再设置padding值。但这样的话html层级加深且语义不明显，不推荐此方法。

2.将需要添加padding的子元素的box-sizing设置为border-box，同时显式的声明flex属性。即（ flex: 33.33% 1 1 ）

其实像如题这种情况，采用grid网格布局是一个更明智的选择。

参考
深入理解 css3 中的 flex-grow、flex-shrink、flex-basic
有关flex布局子项padding问题

解决用flex布局时内容可能溢出的问题

在开发过程中，使用flex布局的时候会遇到子元素的内容溢出的问题，后来找到了解决办法，跟大家分享下。

.father{ display: flex ;}

.son1{ flex: 1;}

第一种方法：

此时对.son1设置width: 100%无效，但是设置width: 0可行。即：

.son1{ flex: 1; width: 0}
如果不设置宽度，.son1可以被子节点无限撑开。

第二种方法：

增加 overflow: hidden。即：

.son1{ flex: 1;  overflow: hidden;}
上面的二种方法都可以达到我们需要的效果。

自定义页面分栏布局

想必大家经常都用到Grid 栅格系统来实现分栏布局，比如BootStrap这种常用的前端UI库中，分栏布局是最常见的功能。假如不想用BootStrap这类整套解决方案的话，也可以自己实现，正巧最近在实现这块，所以随手记一下。

在面对现代浏览器的时候，利用display: flex 是一个很好的解决方案。为何要用flexible box 布局，因为现在主流的浏览器基本都已经支持这个CSS 属性（除了IE9 及以下的浏览器），并且可以实现灵活的布局调整。

从上图可以看出，虽然第二排的两个元素内容不一样多，但是高度依然一致地 填满了父元素 ，这一点对于带背景色的Grid布局很方便。而且想要实现 内容居中 也很方便，只需要设定父元素的align-items和justify-content 两个属性为center 即可。

JsFiddle Flex Demo

flex布局最大的问题就是不支持IE9，那么为了浏览器版本兼容可以用table标签来定义分栏或者设定块级元素的display属性为 table，table-row，table-cell等来模拟table 标签的布局效果。一般来说，将想要并列布局的子元素设为table-cell，父元素设定为table 就可以实现

JsFiddle Table Demo

以上知识点虽然很简单。。但真是 用的时候方恨少 。flex 布局其实总共也就12个属性，具体可以参考 阮一峰的博客 ，很生动详细。

请问，css中Float和flex布局的优缺点

两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。1、float的定义和常见用法：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、实例如下：float属相使得块级元素的div可以在同一行并排，效果如下：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。其属相值有：绝对定位的实例：

css中，用flex和百分比优势劣势

flex更好点,由源代码进行控制布局,一般不会乱掉,但是百分比有些浏览器对边框,和间距定义不同,再加上有的时候你需要给标签加上一些px,会导致百分比不能按预想的样子出现,而且不能微调百分比的设定,不够灵活,相对flex布局就好多了,由源代码进行控制,也不担心额外像素,只要浏览器兼容就可以